controls
Select
A native list of options to pick one value from, such as a length or a car.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
A select needs the component class and one size, inside a field with a label.
<div class="ca-field w-full max-w-sm">
<label class="ca-field__label" for="lesson-length">Lesson length</label>
<select class="ca-select ca-select--md" id="lesson-length" name="length">
<option>60 minutes</option>
<option selected>90 minutes</option>
<option>120 minutes</option>
</select>
</div>Examples
Sizes
Sizes match the input and button sizes, so they line up in a row.
<div class="grid w-full max-w-sm gap-3">
<select class="ca-select ca-select--sm" aria-label="Small select">
<option>Small</option>
</select>
<select class="ca-select ca-select--md" aria-label="Medium select">
<option>Medium</option>
</select>
<select class="ca-select ca-select--lg" aria-label="Large select">
<option>Large</option>
</select>
</div>With an error
Mark the select with aria-invalid="true" and point aria-describedby at the error message.
Choose the car for this lesson.
<div class="ca-field w-full max-w-sm">
<label class="ca-field__label" for="car">Car</label>
<select class="ca-select ca-select--md" id="car" name="car" aria-invalid="true" aria-describedby="car-error">
<option value="">Choose a car</option>
<option>Blue hatchback</option>
<option>Grey automatic</option>
</select>
<p class="ca-field__error" id="car-error">Choose the car for this lesson.</p>
</div>Guidance and accessibility
When to use
- Use a select to pick one value from a list of about five to fifteen options.
- With two to four options, radio buttons show every choice at once.
- With many options people know by name, such as countries, a text input with suggestions is faster.
Accessibility
- It is a native
<select>: the browser’s own list opens on phones and with the keyboard, and screen readers announce the options. - Give it a visible
<label>, connected withforandid. - An empty first option such as “Choose a car” works as a prompt; pair it with an error when nothing is chosen.
- In browsers that support a customizable select (
appearance: base-select, in Chrome and Safari), the open menu wears the skin too: the same edge, radius and colors as the field. Other browsers show their native menu. The markup stays a plain<select>either way. - In forced colors the skin’s arrow gives way to the browser’s own.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-select | Component | Full-width native select with the skin's arrow and the focus ring. |
ca-select--sm | Size | Compact size for toolbars and tables. |
ca-select--md | Size | Default size. |
ca-select--lg | Size | Prominent size for search and sign-up forms. |
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>