Components

Checkbox

Accessible checkbox: checking fills the box with the lumen, pops it with a tiny scale breath, and draws the check stroke in along its path; the `indeterminate` state shows a dash instead.

Ambient previewsPlay hover motion inside gallery tiles.

Monthly digest

Workspace access3 of 7 members selected.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add checkbox

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Checkbox } from "@lumora/ui/components/checkbox";
// or from the barrel:
import { Checkbox } from "@lumora/ui";

Props worth knowing

Works controlled (checked + onCheckedChange) or uncontrolled (defaultChecked). label and description render beside the box, wired via aria-labelledby and aria-describedby; indeterminate shows a dash and reports mixed to assistive tech. The check stroke draws in along its path. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.