Checkbox

A control that allows users to select one or more items from a set.

Installation

pnpm dlx stera-ui add checkbox

Usage

import { Checkbox } from "@/components/ui/checkbox"
<Checkbox />

With Label

Wrap Checkbox in a FieldLabel to make the label clickable.

<FieldLabel>
  <Checkbox />
  Accept terms and conditions
</FieldLabel>

With Description

By clicking this checkbox, you agree to the terms and conditions.

<Field orientation="horizontal">
  <Checkbox id="terms" />
  <FieldContent>
    <FieldLabel htmlFor="terms">Accept terms and conditions</FieldLabel>
    <FieldDescription>
      By clicking this checkbox, you agree to the terms and conditions.
    </FieldDescription>
  </FieldContent>
</Field>

Checkbox Group

Use FieldSet and FieldLegend to semantically group related checkboxes.

Show these items on the desktop:
<FieldSet>
  <FieldLegend variant="label">Show these items on the desktop:</FieldLegend>
  <FieldGroup>
    <Field orientation="horizontal">
      <Checkbox id="hard-disks" defaultChecked />
      <FieldLabel htmlFor="hard-disks">Hard disks</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Checkbox id="external-disks" defaultChecked />
      <FieldLabel htmlFor="external-disks">External disks</FieldLabel>
    </Field>
  </FieldGroup>
</FieldSet>

Disabled

<Field orientation="horizontal" data-disabled="true">
  <Checkbox id="notifications" disabled />
  <FieldLabel htmlFor="notifications">Enable notifications</FieldLabel>
</Field>

API Reference

Built on Base UI's Checkbox primitive.

PropTypeDefault
checkedboolean | "indeterminate"—
defaultCheckedboolean—
onCheckedChange(checked: boolean | "indeterminate") => void—
disabledbooleanfalse
namestring—
valuestring—