Standard checkbox
Default
1import Checkbox from '@tempoplatform/tpds/components/checkbox'
2
3const [state, setState] = useState(true)
4
5<Checkbox
6 active={state}
7 onClick={() => setState(!state)}
8/>Partially selected - use prop "partial"
1import Checkbox from '@tempoplatform/tpds/components/checkbox'
2
3const [state, setState] = useState(true)
4
5<Checkbox
6 active={state}
7 partial={true}
8 onClick={() => setState(!state)}
9/>Disabled - use prop "disabled"
1import Checkbox from '@tempoplatform/tpds/components/checkbox'
2
3<Checkbox
4 active={true}
5 disabled={true}
6/>Prop Name
Type
Default
Required
Description
active
Boolean
false
required
Wether the Checkbox is active or not
partial
Boolean
false
required
Wether the active state is only partial. If true, will show a horizontal symbol instead of a checkmark.
onClick
Function
null
optional
Optionally, you can attach an onClick handler to toggle it's active state. But the element receiving this event can be another.
disabled
Boolean
false
required
Set true to display the checkbox in it's disabled state: semi-transparent and with pointer events disabled.