Checkbox
ExperimentalChoose an independent option or show an aggregate mixed state.
Example
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { Checkbox } from 'panel-ui-kit/checkbox';import { Label } from 'panel-ui-kit/label'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <div style={{ display: "flex", alignItems: "center", gap: 12 }}> <Checkbox id="updates" name="updates" /> <Label htmlFor="updates">Receive updates</Label> </div> </PanelUiTheme> );}When to use
Associate a visible label. The application computes aggregate indeterminate state and validates consent.
Keyboard
Space toggles. Disabled controls leave the tab order.
Properties
| Property | Values | Default |
|---|---|---|
checked / defaultChecked | boolean · indeterminate | false |
onCheckedChange | Radix CheckedState callback | — |
motion | full · reduced · off · object | Inherited |