Checkbox
A control that allows the user to toggle between checked and not checked.
Import
import { Checkbox } from "@retents/ui/checkbox"Usage Guidelines
When to use
- For binary yes/no choices in forms, such as "Accept terms" or "Subscribe to newsletter".
- When users can select multiple independent options from a list.
- Inside forms where each option is an independent boolean.
When NOT to use
- For mutually exclusive choices — use RadioGroup instead.
- For an on/off setting that takes effect immediately — use Switch instead.
- For a toolbar action that toggles a mode — use Toggle instead.
Accessibility
Always pair a Checkbox with a Label using matching htmlFor/id attributes so clicking the label toggles the checkbox.
Preview
Checked: No
Usage
<div className="flex items-center gap-2">
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms and conditions</Label>
</div>