Checkbox

Misc

Accessible checkbox with label and indeterminate state.

Hard-edge checkbox with optional label and description below. Supports indeterminate state for parent-of-children selection patterns. Use CheckboxGroup when managing multiple related checkboxes.

Usage

import { Checkbox } from "nosible-ux"

export default function Example() {
  return <Checkbox label="Include pre-market signals" />
}

Examples

With label and description

Earnings alerts

Notify when earnings reports are published

Guidance changes

Notify on forward guidance revisions

Analyst upgrades

Indeterminate state

All regions

Some regions are selected

Error state

Accept data usage terms

You must accept the terms to continue.

Accessibility

Renders a button element with role="checkbox" via Radix. Label is linked with htmlFor. Indeterminate state sets aria-checked="mixed". Error text is linked via aria-describedby.

Props

Name	Type	Default	Description
`aria-describedby`	`string \| undefined`	—	IDs of external elements that describe this control.
`aria-label`	`string \| undefined`	—	aria-label for the control when no visible label is provided.
`checked`	`boolean \| "indeterminate" \| undefined`	`undefined`	Controlled checked state. Supports true, false, or "indeterminate".
`defaultChecked`	`boolean \| "indeterminate" \| undefined`	`false`	Uncontrolled initial state.
`description`	`ReactNode`	—	Supporting text rendered below the label in text-text-muted.
`error`	`ReactNode`	—	Error message shown below description in critical red. Also sets aria-invalid.
`indeterminate`	`boolean \| undefined`	`false`	When true, overrides checked to render a dash indicator (indeterminate state). This is useful for "select-all" patterns where a subset of children are checked.
`label`	`ReactNode`	—	Visible label rendered to the right of the indicator. Clickable — links to the control.
`onCheckedChange`	`((checked: boolean \| "indeterminate") => void) \| undefined`	—	Fired when the checked state changes.
`required`	`boolean \| undefined`	—	Marks the field as required. Sets aria-required.
`size`	`"sm" \| "md" \| "lg" \| undefined`	`"md"`	Visual and interaction size.
`value`	`string \| undefined`	—	Value used when this Checkbox is nested inside a CheckboxGroup. The group reads this value to manage its string[] state.

← All Components Getting Started →