Checkbox

import { Checkbox } from '@tangible/ui';

Interactive docs and examples: Checkbox in Storybook.

Checkbox props

Prop	Type	Default	Description
`checked?`	`boolean`
`className?`	`string`
`defaultChecked?`	`boolean`	`false`
`disabled?`	`boolean`
`indeterminate?`	`boolean`	`false`
`label?`	`ReactNode`		When provided, renders the checkbox inside a `<label>` with this content. When omitted, renders a bare `<input>` — you must provide an accessible name via `aria-label`, `aria-labelledby`, or a wrapping `Field.Control` + `Field.Label`.
`onCheckedChange?`	`(checked: boolean) => void`

Also accepts the standard attributes of InputHTMLAttributes (data-*, aria-*, event handlers), passed to the element it renders.

Basic: Default unchecked state with visible label.
Bare: Bare checkbox with no visible label — requires aria-label for accessibility.
Checked: Checked by default using defaultChecked.
Indeterminate: Indeterminate state — commonly used as a "select all" parent in a checkbox group.
Controlled: Controlled checkbox — parent owns the checked state.
Indeterminate Toggle: Select-all pattern with indeterminate parent. Uses <fieldset>/<legend> for grouping.
With Field: Checkbox inside a Field — the label prop handles the visible inline label. Skip Field.Label (checkbox is self-labelling). Field.Control still injects aria-describedby (helper/error) and aria-invalid — the name wiring is the only part that doesn't apply.
With Field Error: Error state — Field.Control injects aria-invalid="true" and aria-describedby pointing to the error. The label prop provides the visible inline label. No Field.Label needed.
Multiple Options: Multiple related checkboxes grouped with <fieldset>/<legend>.

Other stories: Disabled, Disabled Checked (interactive page).

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.