Browse Components
Radio
One choice from a clear, related group.
Basic
Choose one option. Arrow keys move between choices; Space selects the focused option.
View Code
<fieldset class="radio-group">
<legend>
Delivery frequency
</legend>
<label class="radio">
<input type="radio" name="frequency" value="daily" checked>
<span>
Daily
</span>
</label>
<label class="radio">
<input type="radio" name="frequency" value="weekly">
<span>
Weekly
</span>
</label>
<label class="radio">
<input type="radio" name="frequency" value="monthly">
<span>
Monthly
</span>
</label>
</fieldset>With a description
Connect shared context to every choice.
View Code
<fieldset class="radio-group">
<legend>
Delivery frequency
</legend>
<p id="frequency-help" class="muted">
Choose how often you receive project summaries.
</p>
<label class="radio">
<input
type="radio"
aria-describedby="frequency-help"
name="frequency"
value="daily"
checked
>
<span>
Daily
</span>
</label>
<label class="radio">
<input type="radio" aria-describedby="frequency-help" name="frequency" value="weekly">
<span>
Weekly
</span>
</label>
<label class="radio">
<input
type="radio"
aria-describedby="frequency-help"
name="frequency"
value="monthly"
>
<span>
Monthly
</span>
</label>
</fieldset>Horizontal
Short choices can share a row and wrap naturally on narrow screens.
View Code
<fieldset class="radio-group">
<legend>
Delivery frequency
</legend>
<div class="cluster">
<label class="radio">
<input type="radio" name="frequency" value="daily" checked>
<span>
Daily
</span>
</label>
<label class="radio">
<input type="radio" name="frequency" value="weekly">
<span>
Weekly
</span>
</label>
<label class="radio">
<input type="radio" name="frequency" value="monthly">
<span>
Monthly
</span>
</label>
</div>
</fieldset>Disabled option
Unavailable choices stay visible and are skipped by keyboard navigation.
View Code
<fieldset class="radio-group">
<legend>
Delivery frequency
</legend>
<label class="radio">
<input type="radio" name="frequency" value="daily" checked>
<span>
Daily
</span>
</label>
<label class="radio">
<input type="radio" name="frequency" value="weekly">
<span>
Weekly
</span>
</label>
<label class="radio">
<input type="radio" name="frequency" value="monthly" disabled>
<span>
Monthly — unavailable on your plan
</span>
</label>
</fieldset>Required and invalid
An error after validation. Application code clears the error and aria-invalid when corrected.
View Code
<fieldset class="radio-group">
<legend>
Delivery frequency (required)
</legend>
<label class="radio">
<input
type="radio"
required
aria-invalid="true"
aria-describedby="frequency-error"
name="frequency"
value="daily"
>
<span>
Daily
</span>
</label>
<label class="radio">
<input
type="radio"
required
aria-invalid="true"
aria-describedby="frequency-error"
name="frequency"
value="weekly"
>
<span>
Weekly
</span>
</label>
<label class="radio">
<input
type="radio"
required
aria-invalid="true"
aria-describedby="frequency-error"
name="frequency"
value="monthly"
>
<span>
Monthly
</span>
</label>
<p class="field-error" id="frequency-error">
Choose a delivery frequency before continuing.
</p>
</fieldset>Long labels
Labels wrap while controls keep their size and align with the first line.
View Code
<fieldset class="radio-group">
<legend>
Delivery frequency
</legend>
<label class="radio">
<input type="radio" name="frequency" value="daily" checked>
<span>
Daily
</span>
</label>
<label class="radio">
<input type="radio" name="frequency" value="weekly">
<span>
Weekly — receive a summary of every project you follow, including activity and upcoming deadlines
</span>
</label>
<label class="radio">
<input type="radio" name="frequency" value="monthly">
<span>
Monthly
</span>
</label>
</fieldset>Right-to-left
Logical spacing follows the reading direction.
View Code
<div dir="rtl" lang="he">
<fieldset class="radio-group">
<legend>
תדירות השליחה
</legend>
<label class="radio">
<input type="radio" name="frequency" value="daily" checked>
<span>
מדי יום
</span>
</label>
<label class="radio">
<input type="radio" name="frequency" value="weekly">
<span>
מדי שבוע
</span>
</label>
<label class="radio">
<input type="radio" name="frequency" value="monthly">
<span>
מדי חודש
</span>
</label>
</fieldset>
</div>Without motion
Selection stays immediate when motion is disabled.
View Code
<div data-motion="none">
<fieldset class="radio-group">
<legend>
Delivery frequency
</legend>
<label class="radio">
<input type="radio" name="frequency" value="daily" checked>
<span>
Daily
</span>
</label>
<label class="radio">
<input type="radio" name="frequency" value="weekly">
<span>
Weekly
</span>
</label>
<label class="radio">
<input type="radio" name="frequency" value="monthly">
<span>
Monthly
</span>
</label>
</fieldset>
</div>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/radio.css">9,659 bytes CSS including base · 0 bytes runtime JavaScript
Usage
Name the group
Use fieldset.radio-group and a visible legend. Wrap each radio and its text in label.radio so the whole label is clickable.
Keep choices together
Give related inputs the same name and different value attributes. Use a different name for each independent group.
Choose an initial state
Add checked to one sensible default, or leave the group unselected when the user must decide. Radio buttons have no mixed state.
Explain validation
Mark required groups in the legend and add required to their inputs. Connect visible errors with aria-describedby; clear aria-invalid when corrected.
Preserve native behavior
Arrow keys select within the group, Space selects, and Tab leaves it. Form reset restores the initial choice. Only the selected enabled value submits.
Keep choices predictable
Do not navigate or submit on selection. Keep links outside labels, explain disabled options, and use checkboxes when several choices are allowed.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.