Checkbox v0.1.0 Forms

Checkbox built on a visually-hidden native input: native form submission and accessibility for free.

import { Checkbox } from "latticeui-react";

Examples

States

Accept terms and conditionsSubscribe to newsletterDisabled option

Show code

<Checkbox label="Accept terms and conditions" defaultChecked />
<Checkbox label="Subscribe to newsletter" />
<Checkbox label="Disabled option" disabled />

Controlled

Subscribe to updates

Show code

const [checked, setChecked] = useState(false);

<Checkbox
  label={checked ? "Subscribed" : "Subscribe to updates"}
  checked={checked}
  onCheckedChange={setChecked}
/>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`label`	`[data-scope="checkbox"][data-part="root"]`
`control`	`span`	`[data-scope="checkbox"][data-part="control"]`
`indicator`only while checked	`span`	`[data-scope="checkbox"][data-part="indicator"]`
`label`	`span`	`[data-scope="checkbox"][data-part="label"]`

Props

Prop	Type	Default	Description
`label` *	`ReactNode`	—
`checked`	`boolean`	—	Controlled value.
`defaultChecked`	`boolean`	`false`
`onCheckedChange`	`(checked: boolean) => void`	—
`disabled`	`boolean`	—
`name / value / required`	`native form props`	—

Accessibility

Roles: checkbox (native input)

Key	Action
`Space`	toggles

Focus ring renders on the visual control while the hidden input holds focus.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="checkbox"][data-part="control"] {
  /* your overrides */
}

State attributes: data-state=checked|uncheckeddata-disabled