Checkbox
Allows users to make a binary choice, such as selecting or not selecting an option. It is commonly used in forms, settings, and filters to capture user input and preferences.
Usage
Examples
Size
Use the size prop to change the checkbox size!
Uncontrolled vs Controlled State
The checked prop allows you to control the state of the checkbox. If you don't provide the checked prop, the checkbox will be uncontrolled.
To manage the state of controlled checkboxes, you need to provide the checked prop and handle via onCheckedChange event listener.
Disabled
Checkbox can be disabled by setting the disabled prop to true. When disabled, the checkbox will not be interactive.
Indeterminate
Indeterminate state is used when a checkbox is part of a group of checkboxes and some of the checkboxes are checked while others are not. It is commonly used in a parent checkbox to indicate that some of its children checkboxes are checked.
Props
Checkbox
| Prop | Type | Default |
|---|---|---|
size | enum | small |
defaultChecked | boolean | indeterminate | false |
checked | boolean | indeterminate | false |
onCheckedChange | (checked: boolean | indeterminate) => void | false |