Checkbox

An interactive control that allows the user to toggle a boolean value.

Accept terms and conditions

import { Checkbox } from '@ontoui/react';

<label>
  <Checkbox.Root>
    <Checkbox.Indicator />
  </Checkbox.Root>
  Accept terms and conditions
</label>;

Anatomy

Part	Element	Description
Checkbox.Root	<span>	The checkbox control. Renders a hidden input beside.
Checkbox.Indicator	<span>	Shown when the checkbox is checked or indeterminate.

Examples

Disabled

Use the disabled prop to prevent interaction.

Disabled uncheckedDisabled checked

<label>
  <Checkbox.Root disabled>
    <Checkbox.Indicator />
  </Checkbox.Root>
  Disabled
</label>

Indeterminate

Use the indeterminate prop to represent a partially-selected state. Provide a custom indicator icon (e.g. a dash) to distinguish it from checked.

Indeterminate

<label>
  <Checkbox.Root indeterminate>
    <Checkbox.Indicator>{/* dash icon */}</Checkbox.Indicator>
  </Checkbox.Root>
  Indeterminate
</label>

API Reference

Checkbox.Root

Prop	Type	Default
children?	ReactNode	—
id?	string	—
className?	string	—
checked?	boolean	—
defaultChecked?	boolean	—
indeterminate?	boolean	—
disabled?	boolean	—
readOnly?	boolean	—
required?	boolean	—
name?	string	—
value?	string	—
onCheckedChange?	(checked: boolean, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void	—
ref?	Ref<HTMLSpanElement>	—

Checkbox.Indicator

Prop	Type	Default
children?	ReactNode	—
className?	string	—
keepMounted?	boolean	—
ref?	Ref<HTMLSpanElement>	—