Checkbox
A binary choice with a precise, legible state.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Independent on and off choices confirmed by a submit, such as accepting terms.
- Parent rows that show a partial selection through the indeterminate state.
- Use switch for settings that apply immediately.
- Use radio-group when only one option can be chosen.
- Use chip-group for filter facets people toggle often.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { Checkbox } from 'animui/checkbox';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { Checkbox } from "animui/checkbox"; export function TermsCheckbox() { const [accepted, setAccepted] = useState(false); return ( <Checkbox label="I agree to the terms" description="You can export your data at any time." checked={accepted} onCheckedChange={(next) => setAccepted(next === true)} /> );}Checkbox
A Radix checkbox whose check morphs into the indeterminate dash and back.
PropTypeDefaultDescription
labelstring–Visible label. Without it, pass aria-label; the fallback name is "Checkbox".descriptionstring–Secondary copy under the label, linked through aria-describedby.checkedboolean | "indeterminate"–Controlled state.defaultCheckedboolean | "indeterminate"falseInitial state when uncontrolled.onCheckedChange(checked: boolean | "indeterminate") => void–Called on every toggle....propsComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>–Radix Checkbox root props, including ref, name, value, required, and disabled.- Space
- Toggles the checkbox.
- Radix renders a button with role="checkbox" and aria-checked, including "mixed" for indeterminate.
- The label is a real label element tied by id; description is linked through aria-describedby.
- The drawn mark is aria-hidden.
- The fill scales in on a snappy spring while the check path draws; switching to indeterminate morphs the same path into a dash.
- Reduced motion applies every state change instantly.
- The hit box is a full control-height square, so it stays easy to tap even though the drawn box is smaller.
- The label and description wrap beside the box; the box stays top-aligned with the first line.
- A single spring on the fill and a path draw per toggle; long lists of checkboxes are fine.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for independent on/off choices in forms. Use switch for settings that apply immediately and chip-group for filter facets.
- Set checked="indeterminate" on a parent checkbox when only some children are selected.
- Radix renders a hidden native input when name is set, so it submits with forms.
The full library index for assistants is at /llms.txt.