Usage
import { Checkbox } from '@kivora/react';
function Demo() {
const [agreed, setAgreed] = useState(false);
return (
<Checkbox
label="Accept terms and conditions"
checked={agreed}
onChange={setAgreed}
/>
);
}
Props
Controlled checked state of the checkbox.
Default checked state for uncontrolled mode.
onChange
(checked: boolean) => void
Called when the checkbox is toggled. Receives the new boolean state.
Label text displayed next to the checkbox.
Disables the checkbox and prevents user interaction.
Shows an indeterminate state (dash icon) instead of checked/unchecked.
Additional CSS classes to apply to the checkbox wrapper.
HTML ID attribute. Auto-generated if not provided.
Examples
Basic Checkbox
<Checkbox label="Subscribe to newsletter" />
Controlled Checkbox
function ControlledDemo() {
const [isChecked, setIsChecked] = useState(false);
return (
<Checkbox
label="Enable notifications"
checked={isChecked}
onChange={setIsChecked}
/>
);
}
Indeterminate State
function SelectAllDemo() {
const [items, setItems] = useState([false, false, false]);
const allChecked = items.every(Boolean);
const someChecked = items.some(Boolean) && !allChecked;
return (
<div className="flex flex-col gap-2">
<Checkbox
label="Select all"
checked={allChecked}
indeterminate={someChecked}
onChange={(checked) => setItems(items.map(() => checked))}
/>
{items.map((checked, i) => (
<Checkbox
key={i}
label={`Item ${i + 1}`}
checked={checked}
onChange={(val) => {
const next = [...items];
next[i] = val;
setItems(next);
}}
/>
))}
</div>
);
}
Disabled State
<Checkbox label="Disabled unchecked" disabled />
<Checkbox label="Disabled checked" disabled defaultChecked />
Without Label
Notes
- Uses a visually hidden native checkbox for accessibility
- Custom visual indicator with smooth transitions and animations
- Indeterminate state is set via DOM property (not an HTML attribute)
- Keyboard navigation fully supported (Space to toggle)
- Focus ring visible for accessibility
- Label is clickable and properly associated with input