| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | | Sets checked prop via onChange when using as controlled component. |
defaultChecked | boolean | | Initialize checked prop when using as uncontrolled component. |
disabled | boolean | | Disable the control. The browser defaults to false. |
id | string | | Sets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render. |
indeterminate | boolean | false
| Sets Checkbox to an an indeterminate state. |
label | ReactNode | | Pass a string or a fragment with an Icon and string. |
name | string | | Sets html name attribute for the underlying control. Useful for mapping to a data field. |
required | boolean | | Indicate if the field is required. The browser defaults to false. |
status | 'success' |'warning' |'error' | | Set visual state based on a validation state. |
Checkbox
Checkboxes allow users to select or unselect options.
For more information on how to use the features and props for this component, check out the developer documentation.
Usage
Checkboxes should be used when displaying less than 7 options to choose from. If you require more than 7 options, consider using a Select field instead. The Checkbox component allows for standard Form field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info.
Use a single Checkbox for binary selections, such as a decision or affirmation. A user may select and deselect the Checkbox as many times as they like. Do not use the Checkbox when a user MUST make an active decision, such as yes or no (use RadioButtons) or if you are expecting the changes to apply instantly (use a Switch).
CheckboxGroup
If there are multiple options to select, wrap the Checkboxes in a CheckboxGroup. By doing so, all of the selections made will belong to the same Form value.
Checkbox cards
A Checkbox can be set to render as a Card which can be ideal to display large volumes of content within a single wrapper. You can set variant to card on either a Checkbox or a CheckboxGroup.
Checkbox
CheckboxGroup
Related components
Properties
Custom theming
You can override the styles of the Checkbox component by setting a custom theme on the Configuration component.
Theme properties
Checkbox
{
'border-radius':'components.form-control.border-radius'// → components.form-control.border-radius}}}
RadioCheck
{
'border-color':'components.form-control.border-color',// → components.form-control.border-color'border-width':'components.form-control.border-width',// → components.form-control.border-width'background-color':'components.form-control.background-color',// → components.form-control.background-color'foreground-color':'base.palette.interactive',// → base.palette.interactive
color:'base.palette.foreground-color',// → base.palette.foreground-color'font-weight':'base.font-weight.normal'// → base.font-weight.normal},size:'1.25rem','touch-size':'1.75rem',
'background-color':'base.palette.interactive',// → base.palette.interactive'border-color':'base.palette.interactive'// → base.palette.interactive}}}}