Checkbox

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

CheckboxIndicator API

import * as Checkbox from '@base_ui/react/Checkbox';
const CheckboxIndicator = Checkbox.Indicator;

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
keepMounted	bool	false	If `true`, the indicator stays mounted when unchecked. Useful for CSS animations.
render	element \| func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

You can use CheckboxIndicator to change the default props of this component with the theme.

import * as Checkbox from '@base_ui/react/Checkbox';
const CheckboxRoot = Checkbox.Root;

Props of the native component are also available.

Name	Type	Default	Description
autoFocus	bool	false	If `true`, the checkbox is focused on mount.
checked	bool	undefined	If `true`, the component is checked.
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
defaultChecked	bool	false	The default checked state. Use when the component is not controlled.
disabled	bool	false	If `true`, the component is disabled.
id	string	-	The id of the input element.
indeterminate	bool	false	If `true`, the checkbox will be indeterminate.
inputRef	func \| { current?: object }	-	The ref to the input element.
name	string	undefined	Name of the underlying input element.
onCheckedChange	func	-	Callback fired when the checked state is changed. Signature:`function(checked: boolean, event: React.ChangeEvent) => void` `checked` The new checked state. `event` The event source of the callback.
readOnly	bool	false	If `true`, the component is read only.
render	element \| func	-	A function to customize rendering of the component.
required	bool	false	If `true`, the `input` element is required.

The ref is forwarded to the root element.

You can use CheckboxRoot to change the default props of this component with the theme.