Checkbox
Turns one option on or off, or picks any number from a list. CheckboxGroup holds the values as an array and can drive a "select all" box.
Installation
Set up Camaleo once (Installation), then import what you need. Wrap each checkbox in a Label so the text is clickable and names it.
import { Checkbox, CheckboxGroup, Label } from "@camaleo/react";Anatomy
A Checkbox is a box with an indicator inside. A CheckboxGroup wraps several labeled checkboxes and keeps their values together.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
A group with a legend
Fieldset render={<CheckboxGroup />} gives the options one name, so a screen reader announces "Email me about" before each of them.
Columns to export
2 of 4 columns selected
Select all
Click the children. With allValues on the group and parent on one box, it shows the mixed state when only some are ticked.
Refunds over $500 wait for an admin to approve them.
With a description
Keep the label short and put the consequence below it, linked with aria-describedby so it is read after the name.
Required, with an error
Submit it unticked. Say what to do in the error, not just "Required"; Field links it to the checkbox.
Available on the Business plan.
Disabled, with a reason
A disabled box still shows what is included. When it is off, say why, so people know how to get it.
| Invoice | Client | Amount | |
|---|---|---|---|
| #1042 | Northwind Traders | $1,280.00 | |
| #1043 | Lumen Studio | $640.50 | |
| #1044 | Atlas Freight | $3,915.00 |
Row selection
In a table the row is the label, so give each checkbox an aria-label that names its row.
In context
Checkboxes live in forms and lists. These are whole pieces of UI you can copy, in the skin you picked.
Create your account
Free for 14 days. No card needed.
Filters
Launch checklist
2 of 5 done
Guidelines
Each one stands alone: people can pick none, one or all of them.
Monthly and yearly at once makes no sense. Use a RadioGroup.
A ticked box should mean yes: "Send me the weekly digest".
A tick that means "don't stop" makes people stop and reread.
Props
defaultChecked prop instead.checked prop instead.CheckboxGroup (the "select all" box).CheckboxGroup and is the value submitted with the form.CheckboxGroup takes value, defaultValue and onValueChange (arrays of the checkboxes' value), allValues for a parent checkbox, and disabled. Native attributes pass through.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the checkbox itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- The hit area is at least 24 × 24 px (WCAG 2.5.8) in every skin, even when the visible box is smaller.
- Clicking the label text toggles the box, so wrap it in Label or link it with htmlFor; the id lands on the box itself, which an ErrorSummary link can focus too.
- The mixed state is announced as "mixed" through aria-checked, not just drawn as a dash.
- Inside a Field, the description and the error are linked to the box with aria-describedby.