@spark-web/checkbox

---
title: Checkbox
storybookPath: forms-checkbox--default
isExperimentalPackage: false
---

Checkboxes are used to toggle between checked and unchecked states — usually in
a form. If only one option from a list is allowed to be enable, consider using a
RadioButton instead.

Examples

$3

Checkboxes can be both controlled and uncontrolled. To control a checkbox
provide the checked state with a value you control, as well as an onChange
function to set the new value when the checkbox is toggled.

``jsx live
const [checked, setChecked] = React.useState(false);

return (

checked={checked}
onChange={event => setChecked(event.target.checked)}
>
{checked ? 'Hide' : 'Show'} message

{checked && Toggle the checkbox to hide this message}

);
`

$3

Checkboxes are available in two sizes: small and medium.

`jsx live





Unchecked


Checked


Disabled


Checked + disabled



Unchecked


Checked


Disabled


Checked + disabled

`

$3

The message is used to communicate the status of a field, such as an error
message. This will be announced on focus and can be combined with a tone to
illustrate intent. The supported tones are: critical, positive and
neutral.

`jsx live




Critical


Positive


Neutral




`

Props

$3

The Checkbox component also extends InputHTMLAttributes props and are not
listed here.

$3

The CheckboxPrimitive component also extends InputHTMLAttributes` props and
are not listed here.

[data-attribute-map]:
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1