Checkbox

Checkbox gives users a binary choice between multiple options in a series.

useCheckboxRoot API

import { useCheckboxRoot } from '@base_ui/react/Checkbox';

Name	Type	Default	Description
autoFocus	boolean	false	If `true`, the checkbox is focused on mount.
checked	boolean	undefined	If `true`, the component is checked.
defaultChecked	boolean	false	The default checked state. Use when the component is not controlled.
disabled	boolean	false	If `true`, the component is disabled.
id	string	-	The id of the input element.
indeterminate	boolean	false	If `true`, the checkbox will be indeterminate.
inputRef	React.Ref<HTMLInputElement>	-	The ref to the input element.
name	string	undefined	Name of the underlying input element.
onCheckedChange	(checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void	-	Callback fired when the checked state is changed.
readOnly	boolean	false	If `true`, the component is read only.
required	boolean	false	If `true`, the `input` element is required.

Name	Type	Description
checked	boolean	If `true`, the checkbox is checked.
getButtonProps	(externalProps?: React.ComponentPropsWithRef<'button'>) => React.ComponentPropsWithRef<'button'>	Resolver for the button element's props.
getInputProps	(externalProps?: React.ComponentPropsWithRef<'input'>) => React.ComponentPropsWithRef<'input'>	Resolver for the input element's props.