radio-button.md

layout	title	description	group	aliases	toc
docs	Radio button	Create consistent cross-browser and cross-device radio buttons.	forms	/docs/forms/radio/ /docs/0.2/forms/radio/	true

{{< callout info >}} You can find here the OUDS Radio button design guidelines. {{< /callout >}}

Basic example

{{< example >}}

Label

Label

Additional label

Helper text

{{< /example >}}

{{< bootstrap-compatibility false >}} {{< example >}}

Default radio button

Checked radio button

{{< /example >}} {{< /bootstrap-compatibility >}}

Approach

Browser default radio buttons are replaced with the help of .control-item-indicator[type="radio"]. Radio buttons allows user to select a single option from a set of mutually exclusive choices.

Radio buttons are implemented using .control-item-* classes, see below.

{{< markdown >}} {{< partial "control-item.md" >}} {{< /markdown >}}

Variants

Outlined

You can display an outlined radio buttons by adding a .radio-button-item-outlined to .radio-button-item. If there is an outlined radio button item in a group, all its siblings should also be outlined.

{{< example >}}

Label

Label

{{< /example >}}

Divider

You can display a divider by adding .control-item-divider to a .radio-button-item.

{{< example >}}

Label

Label

{{< /example >}}

Icon

You can display an icon by adding .control-item-assets-container with an icon (SVG or font-icon most likely) inside as a child of a .radio-button-item.

{{< example >}}

Label

Label

{{< /example >}}

Additional label

You can display an additional label for critical information for the option by adding a .radio-button-additional-label as a sibling of a .control-item-label.

{{< example >}}

Label

Additional label

{{< /example >}}

Helper text

You can display an helper text by adding a .control-item-helper as a sibling of a .control-item-label.

{{< example >}}

Label

Helper Text

{{< /example >}}

Reverse

You can reverse the component by adding .control-item-reverse to a .radio-button-item.

{{< example >}}

Label

{{< /example >}}

{{< bootstrap-compatibility false >}} {{< markdown >}} Put your checkboxes, radios, and switches on the opposite side with the .form-check-reverse modifier class. {{< /markdown >}}

{{< example >}}

Reverse radio

Disabled reverse radio

{{< /example >}} {{< /bootstrap-compatibility >}}

States

Disabled

Add the disabled attribute and the associated <label> are automatically styled to match with a lighter color to help indicate the input's state.

{{< example stackblitz_add_js="true" >}}

Label

Label

{{< /example >}}

{{< bootstrap-compatibility false >}} {{< example stackblitz_add_js="true" >}}

Disabled radio button

Disabled checked radio button

{{< /example >}} {{< /bootstrap-compatibility >}}

Invalid

You can display an invalid radio button by adding .is-invalid to a .control-item-indicator. Please take a look at our [Validation]({{< docsref "/forms/validation" >}}) page to know more about this.

{{< example >}}

Label

Label

{{< /example >}}

{{< bootstrap-compatibility false >}} {{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}

Invalid radio

{{< /example >}} {{< /bootstrap-compatibility >}}

Outlined invalid

This also works for outlined variant of the component.

{{< example >}}

Label

Label

{{< /example >}}

Group

When radio buttons belong to a group (e.g., in a form), you must provide clear context by using a <legend> element inside a <fieldset> for the group title, this way screen readers will read the legend before navigating through the radio buttons.

{{< example >}}

Radio buttons group example

Label

Additional label

Helper text

A longer label for showing behavior in this case

Radio button indicator and icon will stick to the top area of the component

Also a longer helper text, it will also wrap at some point depending on the component width

{{< /example >}}

Standalone

{{< callout warning >}} {{< partial "callouts/standalone-form-indicator.md" >}} {{< /callout >}}

For the standalone Radio button, we provide a completely different architecture to ease the integration inside your projects.

{{< example >}} Label {{< /example >}}

{{< bootstrap-compatibility false >}} {{< callout warning >}} Be careful using this, you must implement the background on hover, focus and active states. {{< /callout >}}

{{< example >}}

{{< /example >}} {{< /bootstrap-compatibility >}}