controls
Radio
A set of options where people pick exactly one.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
Radios with the same name form one group. Wrap them in a <fieldset> with a <legend>.
<fieldset class="ca-field">
<legend class="ca-field__label">Transmission</legend>
<label class="ca-radio">
<input class="ca-radio__input" type="radio" name="transmission" value="manual" checked />
Manual
</label>
<label class="ca-radio">
<input class="ca-radio__input" type="radio" name="transmission" value="automatic" />
Automatic
</label>
</fieldset>Examples
With a hint
Connect a hint to the whole group with aria-describedby on the fieldset.
<fieldset class="ca-field" aria-describedby="plan-hint">
<legend class="ca-field__label">Lesson plan</legend>
<p class="ca-field__hint" id="plan-hint">You can change the plan after each lesson.</p>
<label class="ca-radio">
<input class="ca-radio__input" type="radio" name="plan" value="weekly" checked />
Once a week
</label>
<label class="ca-radio">
<input class="ca-radio__input" type="radio" name="plan" value="twice" />
Twice a week
</label>
<label class="ca-radio">
<input class="ca-radio__input" type="radio" name="plan" value="intensive" />
Intensive course, every day
</label>
</fieldset>Guidance and accessibility
When to use
- Use radios when people pick one option from two to about six, and seeing them all helps the choice.
- Check a sensible default when there is one, so the form can be sent as is.
- With more options, use a select.
Accessibility
- Native radios: Tab reaches the group, arrow keys move between options and screen readers announce the position, such as “2 of 3”.
- The
<legend>is read with each option, so keep it short and phrase it as the question. - On touch screens every row is at least 44 pixels tall.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-radio | Component | The <label> around the input and its text; the click and touch target. |
ca-radio__input | Part | A native <input type="radio">; 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>