Forms

Checkbox

Binary toggle with checked / unchecked / indeterminate states. Built on Radix Checkbox.

Preview

'use client';

import { Checkbox } from '@brika/clay/components/checkbox';

/** Uncontrolled checkbox pre-checked for visible state. */
export default function CheckboxDefaultDemo() {
  return (
    <label className="inline-flex items-center gap-2 text-sm">
      <Checkbox defaultChecked />
      Accept terms and conditions
    </label>
  );
}

01 Installation

Install

Pull Checkbox from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Checkbox } from "@brika/clay";

tsxGranular1 line

import { Checkbox } from "@brika/clay/components/checkbox";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxCheckbox.tsx13 lines

'use client';

import { Checkbox } from '@brika/clay/components/checkbox';

/** Uncontrolled checkbox pre-checked for visible state. */
export default function CheckboxDefaultDemo() {
  return (
    <label className="inline-flex items-center gap-2 text-sm">
      <Checkbox defaultChecked />
      Accept terms and conditions
    </label>
  );
}

03 Examples

Checkbox, every way

Controlled

Controlled checkbox with external state displayed alongside.

GitHub

'use client';

import { Checkbox } from '@brika/clay/components/checkbox';
import { useState } from 'react';

/** Controlled checkbox with external state displayed alongside. */
export default function CheckboxControlledDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <div className="flex items-center gap-4">
      <label className="inline-flex items-center gap-2 text-sm">
        <Checkbox checked={checked} onCheckedChange={(v) => setChecked(v === true)} />
        Subscribe to product updates
      </label>
      <span className="font-mono text-clay-subtle text-xs">{checked ? 'checked' : 'unchecked'}</span>
    </div>
  );
}

Form Group

A realistic notification preferences group with independent checkboxes and labels.

GitHub

'use client';

import { Checkbox } from '@brika/clay/components/checkbox';
import { Label } from '@brika/clay/components/label';
import { useState } from 'react';

/** A realistic notification preferences group with independent checkboxes and labels. */
export default function CheckboxFormGroupDemo() {
  const [prefs, setPrefs] = useState({ email: true, sms: false, push: true });

  const toggle = (key: keyof typeof prefs) =>
    setPrefs((p) => ({ ...p, [key]: !p[key] }));

  return (
    <fieldset className="space-y-3">
      <legend className="mb-3 text-sm font-medium">Notification preferences</legend>
      <div className="flex items-center gap-2">
        <Checkbox id="pref-email" checked={prefs.email} onCheckedChange={() => toggle('email')} />
        <Label htmlFor="pref-email">Email notifications</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="pref-sms" checked={prefs.sms} onCheckedChange={() => toggle('sms')} />
        <Label htmlFor="pref-sms">SMS alerts</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="pref-push" checked={prefs.push} onCheckedChange={() => toggle('push')} />
        <Label htmlFor="pref-push">Push notifications</Label>
      </div>
    </fieldset>
  );
}

Indeterminate

Tri-state checkbox cycling through unchecked, indeterminate, and checked.

GitHub

'use client';

import { Checkbox } from '@brika/clay/components/checkbox';
import { useState } from 'react';

/** Tri-state checkbox cycling through unchecked, indeterminate, and checked. */
export default function CheckboxIndeterminateDemo() {
  const [checked, setChecked] = useState<boolean | 'indeterminate'>('indeterminate');

  return (
    <label className="inline-flex items-center gap-2 text-sm">
      <Checkbox checked={checked} onCheckedChange={setChecked} />
      Select all items
    </label>
  );
}

Sizes

Three size presets, sm, default, lg, side by side with labels.

GitHub

'use client';

import { Checkbox } from '@brika/clay/components/checkbox';

/** Three size presets, sm, default, lg, side by side with labels. */
export default function CheckboxSizesDemo() {
  return (
    <div className="flex items-center gap-6">
      <label className="inline-flex items-center gap-2 text-sm">
        <Checkbox size="sm" defaultChecked />
        Small
      </label>
      <label className="inline-flex items-center gap-2 text-sm">
        <Checkbox size="default" defaultChecked />
        Default
      </label>
      <label className="inline-flex items-center gap-2 text-sm">
        <Checkbox size="lg" defaultChecked />
        Large
      </label>
    </div>
  );
}

04 Accessibility

Accessibility

Built on Radix Checkbox; keyboard, focus, and aria-checked state are handled automatically.
Indeterminate state surfaces as checked="indeterminate"; AT announces "mixed".
Always pair with a visible label, wrap in <label> or use matching htmlFor / id.
Disabled checkboxes are removed from the tab order.

05 Tokens 13 theme-overridable

Theme tokens

Every CSS variable Checkbox reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Checkbox without touching component code.

Checkbox tokens

13 tokens

ColorFill, border, and text colors.7

--checkbox-unchecked-containercolorvar(--input-container)
components.checkbox.uncheckedContainer
Box background in the resting (unchecked) state.
--checkbox-unchecked-bordercolorvar(--input-border)
components.checkbox.uncheckedBorder
Box border color in the resting (unchecked) state.
--checkbox-checked-containercolorvar(--primary)
components.checkbox.checkedContainer
Box background when checked or indeterminate (`data-[state=checked]` / `data-[state=indeterminate]`).
--checkbox-checked-bordercolorvar(--primary)
components.checkbox.checkedBorder
Box border color when checked or indeterminate.
--checkbox-checked-glyphcolorvar(--primary-foreground)
components.checkbox.checkedGlyph
Color of the check / dash glyph painted inside a checked box.
--checkbox-invalid-bordercolorvar(--destructive)
components.checkbox.invalidBorder
Box border color when the checkbox has `aria-invalid="true"`. Defaults to the theme destructive hue.
--checkbox-invalid-ringcolorvar(--destructive)
components.checkbox.invalidRing
Color of the invalid-state focus halo. Painted at 20% opacity in light mode, 40% in dark mode for parity with other form controls.

GeometrySizes, lengths, and corner radii.2

--checkbox-sizesize1rem
components.checkbox.size
Checkbox box edge length.
--checkbox-radiusradiusvar(--radius-tight)
components.checkbox.radius
Checkbox corner radius.

BorderBorder width and style.2

--checkbox-border-widthborder-width1px
components.checkbox.borderWidth
Border width on the checkbox. Set non-zero for outline-style variants.
--checkbox-border-styleborder-stylesolid
components.checkbox.borderStyle
Border style on the checkbox (`solid`, `dashed`, `double`, `none`).

MotionAnimation duration and easing.2

--checkbox-durationdurationvar(--motion-standard-duration)
components.checkbox.duration
Transition duration for checkbox state changes.
--checkbox-easingeasingvar(--motion-standard-easing)
components.checkbox.easing
Transition easing for checkbox state changes.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.checkbox, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "checkbox": {
      "radius": "var(--radius-tight)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-checkbox-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Checkbox. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

className
string
Additional Tailwind / utility classes merged with the base recipe.
sizedefault 'default'
'sm' | 'default' | 'lg'
Preset edge length for the box.
- sm, size-3.5
- default, size-4
- lg, size-5