Radio Groups
Radio buttons are generally used in groups - collections, describing a set of related options. Only one radio button in a given group can be selected at the same time.
Variations
Primary Radio Buttons
Copy as:
copydone
<!-- Component: Primary checkboxes -->
<fieldset class="flex gap-10">
<legend class="mb-6 text-slate-500">Primary radio group:</legend>
<div class="relative flex items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded-full appearance-none cursor-pointer peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="radio" value="huey" id="huey" name="drone" />
<label class="pl-2 cursor-pointer text-slate-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400" for="huey">
Huey
</label>
<svg class="absolute left-0 w-4 h-4 transition-all duration-300 scale-50 opacity-0 pointer-events-none fill-white peer-checked:scale-100 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title-1 description-1" role="graphics-symbol">
<title id="title-1">Circle Shape</title>
<desc id="description-1">
Circle shape to indicate whether the radio input is checked or
not.
</desc>
<circle cx="8" cy="8" r="4" />
</svg>
</div>
<div class="relative flex items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded-full appearance-none cursor-pointer peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="radio" value="dewey" id="dewey" name="drone" />
<label class="pl-2 cursor-pointer text-slate-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400" for="dewey">
Dewey
</label>
<svg class="absolute left-0 w-4 h-4 transition-all duration-300 scale-50 opacity-0 pointer-events-none fill-white peer-checked:scale-100 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title-2 description-2" role="graphics-symbol">
<title id="title-2">Circle Shape</title>
<desc id="description-2">
Circle shape to indicate whether the radio input is checked or
not.
</desc>
<circle cx="8" cy="8" r="4" />
</svg>
</div>
<div class="relative flex items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded-full appearance-none cursor-pointer peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-500 checked:hover:border-emerald-600 checked:hover:bg-emerald-600 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-700 focus-visible:outline-none disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="radio" value="louie" id="louie" name="drone" />
<label class="pl-2 cursor-pointer text-slate-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400" for="louie">
Louie
</label>
<svg class="absolute left-0 w-4 h-4 transition-all duration-300 scale-50 opacity-0 pointer-events-none fill-white peer-checked:scale-100 peer-checked:opacity-100 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title-3 description-3" role="graphics-symbol">
<title id="title-3">Circle Shape</title>
<desc id="description-3">
Circle shape to indicate whether the radio input is checked or
not.
</desc>
<circle cx="8" cy="8" r="4" />
</svg>
</div>
</fieldset>
<!-- End Primary checkboxes -->Secondary Radio Buttons
Copy as:
copydone
<!-- Component: Secondary checkboxes -->
<fieldset class="flex flex-row gap-10">
<legend class="mb-6 text-slate-500">Secondary radio button group:</legend>
<div class="relative flex items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded-full appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-200 checked:hover:border-emerald-600 checked:hover:bg-emerald-300 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-400 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="radio" value="huey2" id="huey2" name="drone2" />
<label class="pl-2 cursor-pointer text-slate-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400" for="huey2">
Huey
</label>
<svg class="absolute left-0 w-4 h-4 transition-all duration-300 scale-50 opacity-0 pointer-events-none fill-emerald-500 peer-checked:scale-100 peer-checked:opacity-100 peer-hover:fill-emerald-600 peer-focus:fill-emerald-700 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title-01 description-01" role="graphics-symbol">
<title id="title-01">Circle Shape</title>
<desc id="description-01">
Circle shape to indicate whether the radio input is checked or not.
</desc>
<circle cx="8" cy="8" r="4" />
</svg>
</div>
<div class="relative flex items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded-full appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-200 checked:hover:border-emerald-600 checked:hover:bg-emerald-300 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-400 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="radio" value="dewey2" id="dewey2" name="drone2" />
<label class="pl-2 cursor-pointer text-slate-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400" for="dewey2">
Dewey
</label>
<svg class="absolute left-0 w-4 h-4 transition-all duration-300 scale-50 opacity-0 pointer-events-none fill-emerald-500 peer-checked:scale-100 peer-checked:opacity-100 peer-hover:fill-emerald-600 peer-focus:fill-emerald-700 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title-02 description-02" role="graphics-symbol">
<title id="title-02">Circle Shape</title>
<desc id="description-02">
Circle shape to indicate whether the radio input is checked or not.
</desc>
<circle cx="8" cy="8" r="4" />
</svg>
</div>
<div class="relative flex items-center">
<input class="w-4 h-4 transition-colors bg-white border-2 rounded-full appearance-none cursor-pointer focus-visible:outline-none peer border-slate-500 checked:border-emerald-500 checked:bg-emerald-200 checked:hover:border-emerald-600 checked:hover:bg-emerald-300 focus:outline-none checked:focus:border-emerald-700 checked:focus:bg-emerald-400 disabled:cursor-not-allowed disabled:border-slate-100 disabled:bg-slate-50" type="radio" value="louie2" id="louie2" name="drone2" />
<label class="pl-2 cursor-pointer text-slate-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400" for="louie2">
Louie
</label>
<svg class="absolute left-0 w-4 h-4 transition-all duration-300 scale-50 opacity-0 pointer-events-none fill-emerald-500 peer-checked:scale-100 peer-checked:opacity-100 peer-hover:fill-emerald-600 peer-focus:fill-emerald-700 peer-disabled:cursor-not-allowed" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title-03 description-03" role="graphics-symbol">
<title id="title-03">Circle Shape</title>
<desc id="description-03">
Circle shape to indicate whether the radio input is checked or not.
</desc>
<circle cx="8" cy="8" r="4" />
</svg>
</div>
</fieldset>
<!-- End Secondary checkboxes -->Usage
All radio buttons should be wrapped in a <fieldset> element that should have a<legend> tag to provide a description for the grouping.
Use the radio buttons to:
- Select a single option from a list
- Expose all available options
Specs
Radio buttons come in two basic styles (primary and secondary). Both have 1rem (16px) height and width and 0.5rem spacing between the button and the label.
Accessibility notes
The <fieldset> surrounds the entire grouping of checkboxes or radio buttons. The <legend>provides a description of the grouping.