controls
Checkbox
A box people tick to turn one option on, alone or as one of several.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
The label wraps the input and its text, so the whole line is clickable.
<label class="ca-checkbox">
<input class="ca-checkbox__input" type="checkbox" name="reminder" checked />
Send me a reminder the day before
</label>Examples
Group
Put related checkboxes in a <fieldset> with a <legend>. ca-field styles both.
<fieldset class="ca-field">
<legend class="ca-field__label">Notify me about</legend>
<label class="ca-checkbox">
<input class="ca-checkbox__input" type="checkbox" name="notify" value="booked" checked />
New bookings
</label>
<label class="ca-checkbox">
<input class="ca-checkbox__input" type="checkbox" name="notify" value="cancelled" checked />
Cancelled lessons
</label>
<label class="ca-checkbox">
<input class="ca-checkbox__input" type="checkbox" name="notify" value="invoices" disabled />
Invoices (set by your school)
</label>
</fieldset>Guidance and accessibility
When to use
- Use a checkbox for an option that people confirm with a form, such as agreeing to terms or picking several topics.
- For a setting that applies at once, use a switch.
- Write the label as the state that is turned on: “Send me a reminder”, not “Don’t send reminders”.
Accessibility
- It stays a native checkbox, so Space toggles it and screen readers announce its state. The label is connected because it wraps the input.
- On touch screens the row is at least 44 pixels tall.
- A group needs a
<fieldset>with a<legend>, so the question is read with each option. - Explain why an option is unavailable in its label or a hint, as the invoices option does.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-checkbox | Component | The <label> around the input and its text; the click and touch target. |
ca-checkbox__input | Part | A native <input type="checkbox">; the skin sets its size and color. |
Skins
The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Framework notes
Link the prebuilt stylesheet of your skin next to your brand theme. No build step.
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.
@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";Same stylesheet as above; write the classes in className.
<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>