Forms

Checkbox

Turns an option on or off in a list, or picks several.

import { Checkbox } from "@flinbu/seed";

States

Include Dark

Sync with FigmaChanges go to the Seed Library file.

Some components

Disabled

import { Checkbox } from "@flinbu/seed";

<div className="flex flex-col gap-sm">
  <Checkbox label="Include Dark" defaultChecked />
  <Checkbox label="Sync with Figma" description="Changes go to the Seed Library file." />
  <Checkbox label="Some components" indeterminate />
  <Checkbox label="Disabled" disabled />
</div>

Use it for

Options that apply when a form is saved.
indeterminate for a parent when some children are checked.

Use something else for

A setting that applies right away: use Switch.

Props

Prop	Type	Default	Description
`label`	`ReactNode`	`none`	Text next to the box.
`description`	`ReactNode`	`none`	Helper line under the label.
`checked / defaultChecked`	`boolean`	`none`	Controlled or initial state.
`onCheckedChange`	`(checked: boolean) => void`	`none`	Called with true or false.
`indeterminate`	`boolean`	`none`	Shows a dash.
`invalid`	`boolean`	`none`	Error border.
`disabled`	`boolean`	`none`	Can't be changed.

Accessibility

Built on Radix Checkbox: Space toggles, aria-checked reports true, false or mixed.
label and description are linked to the box.