Checkbox
At the heart and soul of every application is at least one checkbox. It might be a terms and conditions agreement,
"Do not sell" CCPA notice, or something else; whatever it is, pretty-checkbox-react (PCR) has your back.
Shapes, Variants, & States#
There's no "one size fits all" for input controls like Checkbox.
Thankfully, PCR allows you to represent Checkbox in various ways via the shape and variant prop
for pre-bundled fun. See the shapes docs for more details.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Disabled & Locked#
Of course disabled is supported, but there's also a secondary state called locked.
See the states docs for more details.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Scalability#
Out of the box, PCR offers a bigger prop to make all input controls just a tad bit larger.
For more fine-grained control check out the size docs.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Uncontrolled#
Checkbox forwards refs to the input element ๐.
See the uncontrolled component docs for more info.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Controlled#
PCR exposes helpful state hooks to make managing state a breeze. For checkbox you should use useCheckboxState.
See the controlled component docs for more info.
Boolean Checkboxes#
For simple yes/no, or true/false usage, you can use the hook as-is without any extra config needed ๐ฒ:
SyntaxError: Unexpected token (1:8)
1 : return ()
^Named Checkbox#
PCR supports checkbox controls with a value prop too! The resulting state will be an array โ even if it's a single item.
note
The initial state will be false unless specified otherwise.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Grouped Controls#
PCR represents named checkboxes as an array which allows us to use the same state hook for multiple checkboxes! Not only does this keep your code clean, but keeps th footprint of PCR extra small ๐
SyntaxError: Unexpected token (1:8)
1 : return ()
^Indeterminate#
indeterminate, or tri-state checkboxes are relative niche, but have their place in the wild.
PCR supports state-driven tri-state as well as an indeterminate prop for uncontrolled usage.
Uncontrolled Indeterminate#
Using the indeterminate, PCR sets two things:
aria-checkedtomixedindeterminateproperty on theinputelement to true
info
As of alpha.2 the second point isn't true. A fixed is needed on pretty-checkbox to
ensure :indeterminate selectors style the checkbo as checked.
SyntaxError: Unexpected token (1:8)
1 : return ()
^Controlled Indeterminate#
For controlled usage, you can use the indeterminate or use "indeterminate" as a special state keyword:
SyntaxError: Unexpected token (1:8)
1 : return ()
^Controlled indeterminates have a whole host of usages including trees!
Credit where credit is due. This example is adapted from reakit
SyntaxError: Unexpected token (1:8)
1 : return ()
^indeterminate Gotchas#
No pun intended ๐. Okay, but seriously there's one gotcha regarding indeterminate prop usage you need to be aware of. In rare cases usage of the indeterminate prop with checked will result in the checkbox becoming immediately checked after React re-renders the component. Be sure indeterminate is undefined:
<Checkbox checked={checked} indeterminate={indeterminate || undefined} onChange={/* ... */} icon={/* ... */} />This is due to a side effect in useIndeterminate.ts and in particular the three highlighted lines below:
React.useEffect(() => { if ( state !== 'indeterminate' && ref.current && typeof indeterminateFromProps !== 'undefined' ) { ref.current.checked = indeterminateFromProps; setStatus(indeterminateFromProps); }}, [indeterminateFromProps, state]);If indeterminateFromProps is false (not undefined) then our checkbox becomes immediately unchecked ๐ข.