You confirm your availability for the full duration.
<Checkbox id="project-terms" />
<Label htmlFor="project-terms">Accept project terms</Label>indeterminate is the dash for a parent whose children are partly ticked. It
is separate from checked, so the parent can be unchecked and indeterminate at
the same time — which is what "some of them" means.
API
| Prop | Type | Default | |
|---|---|---|---|
size | "default" | "sm" | "default" | |
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
checked | boolean | — | Whether the checkbox is currently ticked. To render an uncontrolled checkbox, use the defaultChecked prop instead. |
className | string | ((state: CheckboxRootState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
defaultChecked | boolean | — | Whether the checkbox is initially ticked. To render a controlled checkbox, use the checked prop instead. |
disabled | boolean | — | Whether the component should ignore user interaction. |
form | string | — | Identifies the form that owns the hidden input. Useful when the checkbox is rendered outside the form. |
id | string | — | The id of the input element. |
indeterminate | boolean | — | Whether the checkbox is in a mixed state: neither ticked, nor unticked. |
inputRef | Ref<HTMLInputElement> | — | A ref to access the hidden <input> element. |
name | string | — | Identifies the field when a form is submitted. |
nativeButton | boolean | — | 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. |
onCheckedChange | ((checked: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void) | — | Event handler called when the checkbox is ticked or unticked. |
parent | boolean | — | Whether the checkbox controls a group of child checkboxes. Must be used in a Checkbox Group. |
readOnly | boolean | — | Whether the user should be unable to tick or untick the checkbox. |
render | ComponentRenderFn<HTMLProps, CheckboxRootState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | 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. |
required | boolean | — | Whether the user must tick the checkbox before submitting a form. |
style | CSSProperties | ((state: CheckboxRootState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
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. |
value | string | — | The checkbox's value. Identifies it within a 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". |
Plus the DOM props of the element it renders. Source: checkbox/components/checkbox.tsx.