Earth Design System

API reference docs for theCheckboxcomponent. For examples and details on the usage of this component, visit the component demo page.

Props

Prop	Type	Description	Default
`label`	`ReactNode`	Label for the checkbox describing its purpose.	_
`isDisabled?`	`boolean`	Disables the checkbox, making it non-interactive and visually styled as disabled.	`false`
`size?`	`'standard'\| 'large'`	The size of the checkbox.	`standard`
`value?`	`string`	Defines the value of the checkbox input, used when submitting a form.	_
`checked?`	`boolean`	Indicates whether the checkbox is checked, used in controlled components.	_
`id?`	`string`	A unique ID for the checkbox.	_
`name?`	`boolean`	The name attribute of the checkbox, useful for grouping in forms.	_
`description?`	`ReactNode`	Description text displayed alongside the checkbox, providing additional context.	_
`errorMessage?`	`ReactNode`	Message shown when the field is invalid, styled for error state and announced to screen-readers as invalid.	_
`aria-describedby?`	`string`	Defines the ID of the element that provides additional information about the checkbox for accessibility purposes.	_
`onBlur?`	`function`	Function called when the checkbox loses focus.	_
`onClick?`	`function`	Function called when the checkbox is clicked.	_
`onChange?`	`function`	Function called when the checkbox’s value changes.	_
`indeterminate?`	`boolean`	Indicates whether checkbox in an indeterminate state or not. Designed for scenarios like header groups where some, but not all, options are selected.	`false`

Note: For id and aria-describedby, if a value is provided, the IDs will be merged. Otherwise, React.useId will be used to generate unique IDs to associate the labels appropriately.

Checkbox API

Props​

Props