Checkbox

A control that allows the user to toggle between checked and unchecked states.

Usage

Used to allow users to select one or more options from a set.

import { Checkbox, Icon } from "@elemnts-ui/react";

<Checkbox.Root>
  <Checkbox.Control>
    <Checkbox.Indicator>
      <Icon icon="tabler:check" />
    </Checkbox.Indicator>
  </Checkbox.Control>
  <Checkbox.Label>Accept terms</Checkbox.Label>
  <Checkbox.HiddenInput />
</Checkbox.Root>;

Checkbox Group

Use the Checkbox.Group component to group related checkboxes together.

API Reference

Checkbox

The root component for the checkbox.

Prop	Type	Default
asChild	`boolean`	`false`
checked	`CheckedState`	-
defaultChecked	`CheckedState`	-
disabled	`boolean`	`false`
form	`string`	-
id	`string`	-
ids	`Partial<{ root: string; hiddenInput: string; control: string; label: string }>`	-
invalid	`boolean`	`false`
name	`string`	-
onCheckedChange	`(details: CheckedChangeDetails) => void`	-
readOnly	`boolean`	`false`
required	`boolean`	`false`
value	`string`	`"on"`

CheckboxControl

The visual control for the checkbox.

Prop	Type	Default
asChild	`boolean`	`false`

CheckboxIndicator

Displays when the checkbox is checked or indeterminate.

Prop	Type	Default
asChild	`boolean`	`false`
indeterminate	`boolean`	`false`

CheckboxLabel

The label for the checkbox.

Prop	Type	Default
asChild	`boolean`	`false`

CheckboxHiddenInput

The hidden input used for form submission and accessibility.

Prop	Type	Default
asChild	`boolean`	`false`

CheckboxRootProvider

Provides a checkbox state machine created with useCheckbox.

Prop	Type	Default
value	`UseCheckboxReturn`	required
asChild	`boolean`	`false`

CheckboxGroup

Used to group related checkboxes together.

Prop	Type	Default
asChild	`boolean`	`false`
defaultValue	`string[]`	-
disabled	`boolean`	`false`
invalid	`boolean`	`false`
maxSelectedValues	`number`	-
name	`string`	-
onValueChange	`(value: string[]) => void`	-
readOnly	`boolean`	`false`
value	`string[]`	-

CheckboxGroupProvider

Provides a checkbox group state machine created with useCheckboxGroup.

Prop	Type	Default
value	`UseCheckboxGroupContext`	required
asChild	`boolean`	`false`