Checkbox

An independent native choice, including a mixed selection state.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Select all projectsProduct updatesLocked preference

The first checkbox starts in a mixed state. Space or a click selects it.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add checkbox

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<div className="af-choice">
  <Checkbox id="updates" name="updates" defaultChecked />
  <Label htmlFor="updates">Email me product updates</Label>
</div>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`size`	`sm \| md \| lg`	`md`
`checked / defaultChecked`	`boolean`	`—`
`indeterminate`	`boolean`	`false`

Accessibility

Space toggles the native input. Use Label or Field for its name. indeterminate sets the DOM mixed state; onChange receives the native checked value. Only checked controls submit a value. A controlled parent owns its checked/indeterminate reset state. Native input attributes and refs remain available.