Checkbox

A choice that waits for a Save, filled in ink when on and drawing a dash when only some of what it stands for is chosen.

Full screen

01Preview

Use memoryRecall details from earlier chats.Search the webWhen a question needs something recent.Improve the modelManaged by your organisation.

02Installation

npx shadcn@latest add https://aiellie.app/r/checkbox.json

03API reference

From the Base UI documentation

Represents the checkbox itself. Renders a <span> element and a hidden <input> beside.

Props

Prop	Type	Default	Description
name	string	undefined	Identifies the field when a form is submitted.
defaultChecked	boolean	false	Whether the checkbox is initially ticked. To render a controlled checkbox, use the `checked` prop instead.
checked	boolean	undefined	Whether the checkbox is currently ticked. To render an uncontrolled checkbox, use the `defaultChecked` prop instead.
onCheckedChange	((checked: boolean, eventDetails: Checkbox.Root.ChangeEventDetails) => void)	-	Event handler called when the checkbox is ticked or unticked.
indeterminate	boolean	false	Whether the checkbox is in a mixed state: neither ticked, nor unticked.
value	string	-	The checkbox's value. Identifies it within a [Checkbox Group](https://base-ui.com/react/components/checkbox-group), falling back to `name` when omitted. When submitting a form, a checked box submits `value`; with no `value`, it submits the native "on".
form	string	-	Identifies the form that owns the hidden input. Useful when the checkbox is rendered outside the form.
nativeButton	boolean	false	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button.
parent	boolean	false	Whether the checkbox controls a group of child checkboxes. Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group).
uncheckedValue	string	-	The value submitted with the form when the checkbox is unchecked. By default, unchecked checkboxes do not submit any value, matching native checkbox behavior.
disabled	boolean	false	Whether the component should ignore user interaction.
readOnly	boolean	false	Whether the user should be unable to tick or untick the checkbox.
required	boolean	false	Whether the user must tick the checkbox before submitting a form.
inputRef	React.Ref<HTMLInputElement>	-	A ref to access the hidden `<input>` element.
id	string	-	The id of the input element.
className	string \| ((state: Checkbox.Root.State) => string \| undefined)	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	React.CSSProperties \| ((state: Checkbox.Root.State) => React.CSSProperties \| undefined)	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	ReactElement \| ((props: HTMLProps, state: Checkbox.Root.State) => ReactElement)	-	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Data Attributes

Attribute	Type	Description
data-checked	-	Present when the checkbox is checked.
data-unchecked	-	Present when the checkbox is not checked.
data-disabled	-	Present when the checkbox is disabled.
data-readonly	-	Present when the checkbox is readonly.
data-required	-	Present when the checkbox is required.
data-valid	-	Present when the checkbox is in a valid state (when wrapped in Field.Root).
data-invalid	-	Present when the checkbox is in an invalid state (when wrapped in Field.Root).
data-dirty	-	Present when the checkbox's value has changed (when wrapped in Field.Root).
data-touched	-	Present when the checkbox has been touched (when wrapped in Field.Root).
data-filled	-	Present when the checkbox is checked (when wrapped in Field.Root).
data-focused	-	Present when the checkbox is focused (when wrapped in Field.Root).
data-indeterminate	-	Present when the checkbox is in an indeterminate state.