//
A control that allows the user to toggle between checked and not checked.
bun add xiod-ui1import { Checkbox, CheckboxGroupItem, CheckboxGroup } from "xiod-ui/checkbox";1<Checkbox>2 <CheckboxGroup>3 <CheckboxGroupItem />4 </CheckboxGroup>5</Checkbox>| Prop | Type | Default | Description |
|---|---|---|---|
id | string| undefined | - | The id of the input element. |
name | string| undefined | undefined | Identifies the field when a form is submitted. |
form | string| undefined | - | Identifies the form that owns the hidden input. Useful when the checkbox is rendered outside the form. |
checked | boolean| undefined | undefined | Whether the checkbox is currently ticked. To render an uncontrolled checkbox, use the `defaultChecked` prop instead. |
defaultChecked | boolean| undefined | false | Whether the checkbox is initially ticked. To render a controlled checkbox, use the `checked` prop instead. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
onCheckedChange | ((checked: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element| undefined; }) => void)| undefined | - | Event handler called when the checkbox is ticked or unticked. |
readOnly | boolean| undefined | false | Whether the user should be unable to tick or untick the checkbox. |
required | boolean| undefined | false | Whether the user must tick the checkbox before submitting a form. |
indeterminate | boolean| undefined | false | Whether the checkbox is in a mixed state: neither ticked, nor unticked. |
inputRef | Ref<HTMLInputElement>| undefined | - | A ref to access the hidden `<input>` element. |
parent | boolean| undefined | 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| undefined | - | The value submitted with the form when the checkbox is unchecked. By default, unchecked checkboxes do not submit any value, matching native checkbox behavior. |
value | string| undefined | - | 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". |
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
style | CSSProperties| ((state: CheckboxRootState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: CheckboxRootState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, CheckboxRootState>| undefined | - | 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. |
variant | "default"| "expressive"| "sharp"| "diamond"| null| undefined | default |
| Prop | Type | Default | Description |
|---|---|---|---|
value | string[]| undefined | - | Names of the checkboxes in the group that should be ticked. To render an uncontrolled checkbox group, use the `defaultValue` prop instead. |
defaultValue | string[]| undefined | - | Names of the checkboxes in the group that should be initially ticked. To render a controlled checkbox group, use the `value` prop instead. |
onValueChange | ((value: string[], eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element| undefined; }) => void)| undefined | - | Event handler called when a checkbox in the group is ticked or unticked. Provides the new value as an argument. |
allValues | string[]| undefined | - | Names of all checkboxes in the group. Use this when creating a parent checkbox. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
className | string| ((state: CheckboxGroupState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, CheckboxGroupState>| undefined | - | 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. |
style | CSSProperties| ((state: CheckboxGroupState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |