Checkbox

Checkbox toggles an independent boolean option. For mutually exclusive options, use RadioGroup.

Code

<div className="tw:flex tw:flex-col tw:gap-3">
  <div className="tw:flex tw:items-center tw:gap-2">
    <Checkbox id="terms" />
    <Label htmlFor="terms">Accept terms and conditions</Label>
  </div>

  <div className="tw:flex tw:items-center tw:gap-2">
    <Checkbox id="checked" defaultChecked />
    <Label htmlFor="checked">Checked by default</Label>
  </div>

  <div className="tw:flex tw:items-center tw:gap-2">
    <Checkbox id="disabled" disabled />

    <Label htmlFor="disabled" className="tw:opacity-50">
      Disabled
    </Label>
  </div>
</div>

API

Checkbox

Name	Type/Description
checked = undefined	boolean | undefined Whether the checkbox is currently ticked. To render an uncontrolled checkbox, use the `defaultChecked` prop instead.
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.
defaultChecked = false	boolean | undefined Whether the checkbox is initially ticked. To render a controlled checkbox, use the `checked` prop instead.
disabled = false	boolean | undefined Whether the component should ignore user interaction.
form	string | undefined Identifies the form that owns the hidden input. Useful when the checkbox is rendered outside the form.
id	string | undefined The id of the input element.
indeterminate = false	boolean | undefined Whether the checkbox is in a mixed state: neither ticked, nor unticked.
inputRef	Ref<HTMLInputElement> | undefined A ref to access the hidden `<input>` element.
name = "undefined"	string | undefined Identifies the field when a form is submitted.
nativeButton = false	boolean | undefined 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) | undefined Event handler called when the checkbox is ticked or unticked.
parent = false	boolean | undefined Whether the checkbox controls a group of child checkboxes. Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group).
readOnly = false	boolean | undefined Whether the user should be unable to tick or untick the checkbox.
ref	((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined
render	ReactElement<any, 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.
required = false	boolean | undefined Whether the user must tick the checkbox before submitting a form.
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.
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 value of the selected checkbox.