Radio buttons

Radio buttons let users choose only one option from a list of mutually exclusive choices. This means that selecting one option automatically deselects any other.

The guideline content on this page is synced with Figma and can be used as a source of truth. Open in Figma

Anatomy

Radio input
Label

Default states

A component’s state defines its appearance and behaviour.

Example
HTML

development/documentation/docs/radio/examples/states-default.html

<div class="d-flex flex-wrap align-items-center" style="gap: 40px;">
	<div>
		<div class="radio">
			<input type="radio" name="state-default" id="state-default-enabled">
			<label for="state-default-enabled">Enabled</label>
		</div>
	</div>
	<div>
		<div class="radio hover">
			<input type="radio" name="state-default-hover" id="state-default-hover">
			<label for="state-default-hover">Hover</label>
		</div>
	</div>
	<div>
		<div class="radio focus">
			<input type="radio" name="state-default-focused" id="state-default-focused">
			<label for="state-default-focused">Focused</label>
		</div>
	</div>
	<div>
		<div class="radio">
			<input type="radio" name="state-default-disabled" id="state-default-disabled" disabled>
			<label for="state-default-disabled">Disabled</label>
		</div>
	</div>
	<div>
		<div class="radio has-error">
			<input type="radio" name="state-default-error" id="state-default-error">
			<label for="state-default-error">Error</label>
		</div>
	</div>
</div>

Selected states

These are the different states for the selected state.

Example
HTML

development/documentation/docs/radio/examples/states-selected.html

<div class="d-flex flex-wrap align-items-center" style="gap: 40px;">
	<div>
		<div class="radio">
			<input type="radio" name="state-selected-enabled" id="state-selected-enabled" checked>
			<label for="state-selected-enabled">Enabled</label>
		</div>
	</div>
	<div>
		<div class="radio hover">
			<input type="radio" name="state-selected-hover" id="state-selected-hover" checked>
			<label for="state-selected-hover">Hover</label>
		</div>
	</div>
	<div>
		<div class="radio focus">
			<input type="radio" name="state-selected-focused" id="state-selected-focused" checked>
			<label for="state-selected-focused">Focused</label>
		</div>
	</div>
	<div>
		<div class="radio">
			<input type="radio" name="state-selected-disabled" id="state-selected-disabled" disabled checked>
			<label for="state-selected-disabled">Disabled</label>
		</div>
	</div>
	<div>
		<div class="radio has-error">
			<input type="radio" name="state-selected-error" id="state-selected-error" checked>
			<label for="state-selected-error">Error</label>
		</div>
	</div>
</div>

Usage

Radio buttons are perfect for forms and surveys when users must choose one option from a list.

Unlike a dropdown, they let users quickly see and compare all choices at a glance.

You should always have at least two options when using radio buttons.

Example
HTML

Label 1

Label 2

Label 3

development/documentation/docs/radio/examples/usage.html

<div class="d-flex flex-column align-items-start">
	<div class="radio">
		<input type="radio" name="usage" id="usage-1">
		<label for="usage-1">Label 1</label>
	</div>
	<div class="radio">
		<input type="radio" name="usage" id="usage-2" checked>
		<label for="usage-2">Label 2</label>
	</div>
	<div class="radio">
		<input type="radio" name="usage" id="usage-3">
		<label for="usage-3">Label 3</label>
	</div>
</div>

Clickable area

It is crucial for both the label and the radio button to be clickable to ensure usability and accessibility for all users. By making the label also clickable, you provide a much larger and more forgiving target, which reduces user frustration and the chance of accidental errors.

Accessibility

Keyboard interaction

All radio buttons should be reachable via TAB and SHIFT+TAB keys.

Example
HTML

Label

development/documentation/docs/radio/examples/keyboard-interaction.html

<div class="radio focus">
	<input type="radio" name="keyboard-interaction" id="keyboard-interaction-example" checked>
	<label for="keyboard-interaction-example">Label</label>
</div>

Best practices

Item 1

Item 2

Item 3

development/documentation/docs/radio/examples/content-guidelines-do.html

<div class="d-flex flex-column align-items-start">
	<div class="radio">
		<input type="radio" name="content-do" id="content-do-1" checked>
		<label for="content-do-1">Item 1</label>
	</div>
	<div class="radio">
		<input type="radio" name="content-do" id="content-do-2">
		<label for="content-do-2">Item 2</label>
	</div>
	<div class="radio">
		<input type="radio" name="content-do" id="content-do-3">
		<label for="content-do-3">Item 3</label>
	</div>
</div>

Start with capital letters.

Example
HTML

item 1

item 2

item 3

development/documentation/docs/radio/examples/content-guidelines-dont.html

<div class="d-flex flex-column align-items-start">
	<div class="radio">
		<input type="radio" name="content-dont" id="content-dont-1" checked>
		<label for="content-dont-1">item 1</label>
	</div>
	<div class="radio">
		<input type="radio" name="content-dont" id="content-dont-2">
		<label for="content-dont-2">item 2</label>
	</div>
	<div class="radio">
		<input type="radio" name="content-dont" id="content-dont-3">
		<label for="content-dont-3">item 3</label>
	</div>
</div>

Don't

Don’t start with small letters.

Usage

Example
HTML

Credit card

Invoice

Direct debit

development/documentation/docs/radio/examples/usage-do.html

<div class="d-flex flex-column align-items-start">
	<div class="radio">
		<input type="radio" name="usage-do" id="usage-do-1" checked>
		<label for="usage-do-1">Credit card</label>
	</div>
	<div class="radio">
		<input type="radio" name="usage-do" id="usage-do-2">
		<label for="usage-do-2">Invoice</label>
	</div>
	<div class="radio">
		<input type="radio" name="usage-do" id="usage-do-3">
		<label for="usage-do-3">Direct debit</label>
	</div>
</div>

Use radio buttons when users need to select only one option from a list.

Example
HTML

Credit card

Invoice

Direct debit

development/documentation/docs/radio/examples/usage-dont.html

<!-- WARNING: This example intentionally uses separate name groups to force two checked radios.
     This is invalid usage and should NOT be copied. It exists only to illustrate a bad practice. -->
<div class="d-flex flex-column align-items-start">
	<div class="radio">
		<input type="radio" name="usage-dont-a" id="usage-dont-1" checked>
		<label for="usage-dont-1">Credit card</label>
	</div>
	<div class="radio">
		<input type="radio" name="usage-dont-b" id="usage-dont-2" checked>
		<label for="usage-dont-2">Invoice</label>
	</div>
	<div class="radio">
		<input type="radio" name="usage-dont-c" id="usage-dont-3">
		<label for="usage-dont-3">Direct debit</label>
	</div>
</div>

Don't

Don’t use radio buttons when users can select multiple options at once. Use checkboxes instead.

Specs

Design

Radio buttons

The disabled style will be applied for any of these: add .disabled class to your .radio or <fieldset>, or disabled attribute or disabled class on the input.

Example
HTML

Option one selecting it will deselect option two

Option two is checked

Option three is disabled

Option four is checked and disabled

development/documentation/docs/radio/examples/radiobuttons.html

<div class="radio">
	<input name="optionsRadios" id="optionsRadios1" value="option1" type="radio">
	<label for="optionsRadios1">Option one selecting it will deselect option two</label>
</div>
<br>
<div class="radio mb-32">
	<input name="optionsRadios" id="optionsRadios2" value="option2" checked="checked" type="radio">
	<label for="optionsRadios2">Option two is checked</label>
</div>
<br>
<div class="radio disabled">
	<input name="optionsRadios" id="optionsRadios3" value="option3" disabled="disabled" type="radio">
	<label for="optionsRadios3">Option three is disabled</label>
</div>
<br>
<div class="radio disabled">
	<input name="optionsRadiosa" id="optionsRadios4" value="option4" disabled type="radio" checked>
	<label for="optionsRadios4">Option four is checked and disabled</label>
</div>

Disabled as readonly

To present a radio button in a non-interactive state that preserves its current value, apply the disabled attribute to the input. You can optionally use the .disabled class on the wrapper, for example when disabling a group or to reinforce the visual disabled state.

Why not use the `readonly` attribute?

The HTML readonly attribute has no effect on radio buttons. It is only supported on text-based inputs such as <input type="text"> and <textarea>. Browsers silently ignore readonly on radio buttons, meaning users can still change the value despite the attribute being present.

Use the disabled attribute instead to prevent user interaction. If the value must be submitted with the form, consider adding a hidden <input> that carries the value alongside the disabled control.

Example
HTML

Option one - unchecked

Option two - checked

development/documentation/docs/radio/examples/readonly-radiobuttons.html

<div class="radio disabled">
    <input type="radio" id="radio-disabled-readonly-example-1" disabled>
    <label for="radio-disabled-readonly-example-1">Option one - unchecked</label>
</div>
<br>
<div class="radio disabled">
    <input type="radio" id="radio-disabled-readonly-example-2" disabled checked>
    <label for="radio-disabled-readonly-example-2">Option two - checked</label>
</div>

Secondary/outline style

Deprecated 2.4 — This style will be removed in 3.0. Use the default radio button style instead.

For the secondary style of the radio button just add the .radio-outline class to the .radio wrapper.

Example
HTML

Option one will deselect option two

Option one is checked

Option three is disabled

Option four is checked and disabled

development/documentation/docs/radio/examples/outline-radios.html

<div class="example-box example-box-border-only bg-default">
    <div class="radio radio-outline">
        <input name="optionsRadiosOutline" id="optionsRadiosOutline1" value="option1" type="radio">
        <label for="optionsRadiosOutline1">Option one will deselect option two</label>
    </div>
    <br>
    <div class="radio radio-outline mb-32">
        <input name="optionsRadiosOutline" id="optionsRadiosOutline2" value="option2" checked="checked" type="radio">
        <label for="optionsRadiosOutline2">Option one is checked</label>
    </div>
    <br>
    <div class="radio radio-outline disabled">
        <input name="optionsRadiosOutline" id="optionsRadiosOutline3" value="option3" disabled="disabled" type="radio">
        <label for="optionsRadiosOutline3">Option three is disabled</label>
    </div>
    <br>
    <div class="radio radio-outline disabled">
        <input name="optionsRadiosOutlineA" id="optionsRadiosOutline4" value="option4" disabled="disabled" type="radio" checked="checked">
        <label for="optionsRadiosOutline4">Option four is checked and disabled</label>
    </div>
</div>

Inline radio buttons

Deprecated 2.3 — This layout will be removed in 3.0.

Example
HTML

development/documentation/docs/radio/examples/inline.html

<form action="">
    <div class="radio mr-24">
        <input type="radio" id="inlineRadio1" value="option1" name="inlineRadio"> <label for="inlineRadio1">Inline radio 1</label>
    </div>
    <div class="radio mr-24">
        <input type="radio" id="inlineRadio2" value="option2" name="inlineRadio"> <label for="inlineRadio2">Inline radio 2</label>
    </div>
    <div class="radio mr-24">
        <input type="radio" id="inlineRadio3" value="option3" name="inlineRadio"> <label for="inlineRadio3">Inline radio 3</label>
    </div>
</form>

Radio buttons

Anatomy

Default states

Selected states

Usage

Clickable area

Accessibility

Keyboard interaction

Best practices

Content guidelines

Usage

Specs

Design

Radio buttons

Disabled as readonly

Why not use the readonly attribute?

Secondary/outline style

Inline radio buttons

Why not use the `readonly` attribute?