Checkbox
The Checkbox
component is used in forms when a user needs to select multiple values from several options.
Usage
Editable Example
Invalid
Editable Example
Indeterminate
Editable Example
CheckboxGroup
The react-components package exports a CheckboxGroup
component to help manage the checked state of
it's children.
Editable Example
You can also make checkbox group appear horizontally by passing the inline
prop.
Editable Example
Props
Checkbox Props
Name | Type | Default | Description |
---|---|---|---|
id | string | The id of the checkbox for associated with a label. | |
name | string | The input name of the checkbox when used in a form. | |
value | string , boolean | The value of the checkbox. | |
children | React.ReactNode | The children of the checkbox. | |
aria-label | string | The aria-label of the checkbox for accessibility. | |
aria-labelledby | string | The aria-labelledby of the checkbox for accessibility. | |
checked | boolean | If true , set the checkbox to the checked state. | |
defaultChecked | boolean | If true , the checkbox will be initially checked. | |
disabled | boolean | If true , set the disabled to the invalid state. | |
invalid | boolean | If true , set the checkbox to the invalid state. | |
fontSize | 'xs' | 'sm' | 'md' | 'lg' | Specify the label's font size. |
CheckboxGroup Props
CheckboxGroup composes Box
so you can pass all Box
props.
Name | Type | Default | Description |
---|---|---|---|
id | string | The id of the checkbox group. | |
name | string | The name of the checkbox group. | |
value | Array<Checkbox["value"]> | The value of the checkbox group. | |
defaultValue | Array<Checkbox["value"]> | The initial value of the checkbox group. | |
onChange | (values: Array<Checkbox["value"]>): void | The callback fired when any children Checkbox is checked or unchecked. | |
children | React.ReactNode | The content of the checkbox group. Must be the Checkbox component. | |
spacing | FlexProps["space"] | The space between each checkbox. | |
inline | boolean | If true , the checkboxes will aligned horizontally. |