Checkbox
An accessible checkbox built on @radix-ui/react-checkbox with an animated check/indeterminate icon powered by Framer Motion.
Installation
# Package
npm install @lumina-ui/react
# CLI
npx lumina-ui add checkbox
# deps: @radix-ui/react-checkbox framer-motion clsxUsage
import { Checkbox, Label } from '@lumina-ui/react'
export default function Example() {
return (
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<Checkbox id="accept" />
<Label htmlFor="accept">Accept terms and conditions</Label>
</div>
)
}Controlled
import { useState } from 'react'
import { Checkbox } from '@lumina-ui/react'
export default function Controlled() {
const [checked, setChecked] = useState(false)
return (
<Checkbox
checked={checked}
onCheckedChange={(value) => setChecked(value === true)}
/>
)
}Indeterminate state
<Checkbox checked="indeterminate" aria-label="Select all" />Shows a dash icon when in the indeterminate state.
Props
| Prop | Type | Description |
|---|---|---|
checked | boolean | 'indeterminate' | Controlled checked state |
defaultChecked | boolean | Uncontrolled initial state |
onCheckedChange | (checked: boolean | 'indeterminate') => void | Change handler |
disabled | boolean | Disables the checkbox |
Accessibility
role="checkbox"witharia-checkedmanaged by Radix- Keyboard:
Spacetoggles, works inside forms - Animation disabled when
prefers-reduced-motionis set