build69
Sign inGet API key
build69  /  Components  /  Selection & Choice  /  Checkbox

Checkbox

v1.0.1Updated 20 Jul 2026

Two- or three-state checkbox (Radix). Use for boolean form fields or selectable list rows. Adds description / error slots, a card layout variant, and a CheckboxGroup that derives indeterminate state on a parent from its

View source← Back to catalog

Preview

Live · 15 stories
DefaultOpen ↗
▸Why this is recommendedformbooleanselecttoggle+4

The default, out-of-the-box Checkbox.

Recommended for+14
  • ✓Form opt-ins
  • ✓Bulk-select row cells
  • ✓Filter dropdowns
  • ✓Multi-select groups with parent toggle
  • ✓Permission grids
  • ✓Acceptance checkboxes with description
Tags+6
formbooleanselecttogglegroupindeterminatecarddefault
Features+4
  • Indeterminate state
  • Keyboard accessible
  • Disabled state
  • Description + error slots
  • Card layout variant
  • CheckboxGroup with parent-indeterminate derivation
  • Disabled / required states
Not recommended for−2
  • ✕Mutually-exclusive choices (use RadioGroup)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Checkbox" })

Usage

import { Checkbox, CheckboxGroup } from '@/components/inputs/checkbox';

<CheckboxGroup label="Permissions" values={selected} onValuesChange={setSelected}>
  <Checkbox value="read" label="Read" />
  <Checkbox value="write" label="Write" />
</CheckboxGroup>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
checked

Checked state

boolean | 'indeterminate'—
onCheckedChange

State change callback

function—
label

Checkbox label

ReactNode—
description

Supporting description

ReactNode—
error

Validation error

string—
card

Card layout

boolean—

Related

Platform docsAll componentsSource files