Skip to main content
Logo USWDS + Tailwind

Radio buttons

Radio buttons allow users to select exactly one choice from a group.

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Select one historical figure
Twig
<form class="max-w-xs">
<fieldset>
<legend class="leading-snug max-w-56 mb-3">Select one historical figure</legend>
<div class="space-y-2">
{% for radio in radios %}
{% set radio_id = 'radio-' ~ random() %}
<label for="{{ radio_id }}" class="flex">
<input
{{ radio.isDisabled == true ? 'disabled' : null }}
id="{{ radio_id }}"
type="radio"
value="{{ radio.value }}"
name="historical-figures"
class="sr-only peer"
/>
<div class="flex items-center justify-center top-0.5 shrink-0 relative cursor-pointer text-blue-60v border-none size-5 rounded-full ring-2 ring-offset-0 ring-gray-90 peer-focus:ring-2 peer-focus:ring-offset-0 peer-focus:ring-gray-90 peer-focus:outline peer-focus:outline-4 peer-focus:outline-offset-4 peer-focus:outline-blue-40v peer-disabled:ring-gray-50 peer-disabled:cursor-not-allowed peer-disabled:peer-checked:text-gray-50 peer-checked:ring-blue-60v peer-focus:peer-checked:ring-blue-60v before:size-4 before:block before:rounded-full before:peer-checked:bg-blue-60v before:peer-checked:peer-disabled:bg-gray-50"></div>
<div class="pl-3 cursor-pointer block peer-disabled:text-gray-60 peer-disabled:cursor-not-allowed">
{{- radio.label -}}
</div>
</label>
{% endfor %}
</div>
</fieldset>
</form>

Tiled

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Select any historical figure
Twig
<form class="max-w-xs">
<fieldset>
<legend class="leading-snug max-w-56 mb-3">Select any historical figure</legend>
<div class="space-y-2">
{% for radio in radios %}
{% set radio_id = 'radio-' ~ random() %}
<label for="{{ radio_id }}" class="flex relative z-0 px-3 py-4">
<input
{{ radio.isDisabled == true ? 'disabled' : null }}
id="{{ radio_id }}"
type="radio"
value="{{ radio.value }}"
name="historical-figures"
class="sr-only peer"
/>
<div class="flex items-center justify-center top-0.5 shrink-0 relative cursor-pointer text-blue-60v border-none size-5 rounded-full ring-2 ring-offset-0 ring-gray-90 peer-focus:ring-2 peer-focus:ring-offset-0 peer-focus:ring-gray-90 peer-focus:outline peer-focus:outline-4 peer-focus:outline-offset-4 peer-focus:outline-blue-40v peer-disabled:ring-gray-50 peer-disabled:cursor-not-allowed peer-disabled:peer-checked:text-gray-50 peer-checked:ring-blue-60v peer-focus:peer-checked:ring-blue-60v before:size-4 before:block before:rounded-full before:peer-checked:bg-blue-60v before:peer-checked:peer-disabled:bg-gray-50"></div>
<div class="pl-3 cursor-pointer block peer-disabled:text-gray-60 peer-disabled:cursor-not-allowed before:absolute before:-z-10 before:inset-0 before:bg-white before:border-2 before:border-gray-20 before:rounded peer-checked:before:border-blue-60v peer-checked:before:bg-blue-60v/10 peer-disabled:before:border-gray-10 peer-disabled:before:bg-white">
{{- radio.label -}}
{% if radio.description %}
<span class="block mt-1 text-sm">
{{- radio.description -}}
</span>
{% endif %}
</div>
</label>
{% endfor %}
</div>
</fieldset>
</form>