Choice
A radio or checkbox option large enough to explain itself.
On this page
A choice is an option large enough to explain itself: a plan, a payment method, a setting with a sentence under it. It is a <label> around a native radio or checkbox, so the whole face is the target and the input keeps the state and the keys. At rest it is a flat face on one contour; chosen, it rises one step and its contour turns to ink.
Choice
<fieldset class="fieldset max-w(420) mx-auto"> <legend class="fieldset-legend">Plan</legend> <label class="choice"> <input type="radio" class="radio" name="plan" value="hobby"> <span class="choice-body"> <span class="choice-title">Hobby</span> <span class="choice-description">For personal projects and experiments.</span> </span> <span class="choice-end">Free</span> </label> <label class="choice"> <input type="radio" class="radio" name="plan" value="pro" checked> <span class="choice-body"> <span class="choice-title">Pro</span> <span class="choice-description">For teams that ship every day.</span> </span> <span class="choice-end">$20</span> </label> <label class="choice"> <input type="radio" class="radio" name="plan" value="enterprise" disabled> <span class="choice-body"> <span class="choice-title">Enterprise</span> <span class="choice-description">Not available in your region yet.</span> </span> </label></fieldset>#How it reads its state
The choice has no state of its own. It asks the input inside it with :has(): :has(:checked) raises the face, :has(:focus-visible) draws the focus ring around the whole option instead of around the small input, and :has(:disabled) drops it to a well. Nothing is toggled by script and nothing can fall out of step with the form.
#Several at once
With checkboxes, any number can be chosen. A switch at the end makes a setting row.
Several at once
<label class="choice"> <input type="checkbox" class="checkbox" checked> <span class="choice-body"> <span class="choice-title">Deployment succeeded</span> <span class="choice-description">One email for each production deployment.</span> </span></label><label class="choice"> <input type="checkbox" class="checkbox"> <span class="choice-body"> <span class="choice-title">Weekly summary</span> <span class="choice-description">Traffic, errors and build minutes, every Monday.</span> </span></label>#In a grid
Choices are blocks, so a grid lays them side by side. Keep the titles short when they share a row.
In a grid
<label class="choice"> <input type="radio" class="radio" name="region" checked> <span class="choice-body"> <span class="choice-title">Tokyo</span> <span class="choice-description">hnd1</span> </span></label><label class="choice"> <input type="radio" class="radio" name="region"> <span class="choice-body"> <span class="choice-title">Frankfurt</span> <span class="choice-description">fra1</span> </span></label><label class="choice"> <input type="radio" class="radio" name="region"> <span class="choice-body"> <span class="choice-title">Virginia</span> <span class="choice-description">iad1</span> </span></label>#Accessibility
- Group choices in a
fieldsetwith a legend, and give radios onename. - The title and the description are both part of the label, so both are read as the option's name. Keep the description to one sentence.
- The chosen state is drawn with ink and depth and by the input's own mark, never by hue.
#Classes
| Class | Description |
|---|---|
choice | The option, on a label around a radio, a checkbox or a switch; the focus ring is drawn around the whole option |
choice-body | The words: a title and an optional description, on one edge |
choice-title | The option's name, inside choice-body |
choice-description | One muted sentence under the title, inside choice-body |
choice-end | A price, a badge or a figure at the end of the first line |
#Custom properties
| Property | Default | Description |
|---|---|---|
--choice-padding | .875rem | Padding inside the option |
--choice-radius | var(--radius-control-lg) | Corner radius |