A real checkbox input with an animated draw-in checkmark, indeterminate state, and label.
CheckedIndeterminateDisabled
<Checkbox bind:checked label="Email me when a deployment fails" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Checkbox } from '@chanrg/4ui';<Checkbox bind:checked label="Email me when a deployment fails" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean ($bindable) | false | State. |
indeterminate | boolean | false | Mixed state for partial selections. |
label | string | — | Visible label text. |
onchange | (checked) => void | — | Change callback. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Backed by a native input: form submit, label click, and keyboard all work.
- Checkmark animation disappears under reduced motion.