controls
Switch
An on and off control for a setting that takes effect at once.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
A checkbox with role="switch" inside the label. Screen readers announce it as on or off.
<label class="ca-switch">
<input class="ca-switch__input" type="checkbox" role="switch" name="weekends" checked />
Show weekends in the calendar
</label>Examples
Settings
Group related switches in a <fieldset> with a <legend>.
<fieldset class="ca-field">
<legend class="ca-field__label">Notifications</legend>
<label class="ca-switch">
<input class="ca-switch__input" type="checkbox" role="switch" name="email" checked />
Email me about changes
</label>
<label class="ca-switch">
<input class="ca-switch__input" type="checkbox" role="switch" name="sms" />
Text me on the day of a lesson
</label>
<label class="ca-switch">
<input class="ca-switch__input" type="checkbox" role="switch" name="push" disabled />
Push notifications (needs the app)
</label>
</fieldset>Guidance and accessibility
When to use
- Use a switch for a setting that applies the moment it changes, such as notifications or showing weekends.
- When the choice only counts after a Save button, use a checkbox.
- Write the label as the state that is on: “Email me about changes”.
Accessibility
- It is a native checkbox with
role="switch": Space toggles it, and screen readers say “on” or “off” instead of “checked”. - The thumb’s position and the track color both show the state; the label says what it controls.
- In forced colors the skin’s drawing gives way to the native checkbox, so the state stays visible.
- When the change saves something, confirm it, for example with an alert that
uses
role="status".
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-switch | Component | The <label> around the switch and its text; the click and touch target. |
ca-switch__input | Part | A native checkbox with role="switch"; the skin draws the track and thumb. |
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>