React SDK

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

NameTypeDefaultDescription
idstringThe id of the checkbox for associated with a label.
namestringThe input name of the checkbox when used in a form.
valuestring, booleanThe value of the checkbox.
childrenReact.ReactNodeThe children of the checkbox.
aria-labelstringThe aria-label of the checkbox for accessibility.
aria-labelledbystringThe aria-labelledby of the checkbox for accessibility.
checkedbooleanIf true, set the checkbox to the checked state.
defaultCheckedbooleanIf true, the checkbox will be initially checked.
disabledbooleanIf true, set the disabled to the invalid state.
invalidbooleanIf 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.

NameTypeDefaultDescription
idstringThe id of the checkbox group.
namestringThe name of the checkbox group.
valueArray<Checkbox["value"]>The value of the checkbox group.
defaultValueArray<Checkbox["value"]>The initial value of the checkbox group.
onChange(values: Array<Checkbox["value"]>): voidThe callback fired when any children Checkbox is checked or unchecked.
childrenReact.ReactNodeThe content of the checkbox group. Must be the Checkbox component.
spacingFlexProps["space"]The space between each checkbox.
inlinebooleanIf true, the checkboxes will aligned horizontally.