Checkbox

The Checkbox component allows users to create a checkbox to represent boolean states.

Basic usage
You can access the value of a Checkbox using its component state.
tsx
Copied
1
<Checkbox id="checkbox" label="Click me!" />
2
<Text>Checked: {String(checkboxState.checked)}</Text>

Disabling
A Checkbox can be disabled using the defaultDisabled prop.
tsx
Copied
1
<Checkbox label="Disabled checkbox" defaultDisabled defaultChecked />

Setting values
If you need to update values programmatically, you should use the setChecked and setDisabled functions on the state.
tsx
Copied
1
<Button onClick={() => checkboxState.setChecked(!checkboxState.checked)}>
2
  Toggle checked
3
</Button>
4
<Button onClick={() => checkboxState.setDisabled(!checkboxState.disabled)}>
5
  Toggle disabled
6
</Button>
7
<Checkbox id="checkbox" label="You can control this checkbox using the above buttons" />

Component API
checked
optional
boolean

Whether the checkbox is checked when using as a controlled component. Prefer using defaultChecked and the global component state.

color
optional
"primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}`

Color of the checkbox.

defaultChecked
optional
boolean

Whether the checkbox is initially checked.

defaultDisabled
optional
boolean

Whether the checkbox is initially disabled.

description
optional
Component

Description displayed below the checkbox. This can be a string or a React component.

error
optional
Component

Displays error message after the select input. Can be a string or a React component.

id
optional
string

The ID referenced by the global component state.

indeterminate
optional
boolean

If true, the checkbox is in an indeterminate state.

label
optional
Component

Checkbox label. This can be a string or a React component.

onChange
optional
(value: boolean) => void

Callback when checked state changes when using as a controlled component. Prefer using the global component state.

radius
optional
"xs" | "sm" | "md" | "lg" | "xl"

The border-radius of the checkbox.

required
optional
default: false
boolean

Adds red asterisk on the right side of label and sets required on input element

size
optional
"xs" | "sm" | "md" | "lg" | "xl"

Size of the checkbox.

validate
optional
((value: boolean) => string | undefined) | Array<(value: boolean) => string | undefined>

A single function or an array of functions that validate the input value.

State API
checked
boolean

Whether the checkbox is checked

disabled
boolean

Whether the checkbox is disabled

setChecked
(checked: boolean) => void

Sets the value of the checkbox

setDisabled
(disabled?: boolean) => void

Sets the disabled value of the checkbox. If the disabled value is not provided, the checkbox will be disabled

PrivacyTermsSupport