Radio

An input of type "radio" is a form element that allows users to select a single item from a list of related options.

Usage

When to use

• To allow users to select a single option from a group of two or more mutually exclusive options.

When not to use

• When users should check and uncheck an option, consider Checkbox.
• When users need to select more than one option from a list, consider Checkbox.
• When checking or unchecking results in an immediate change, consider Toggle.

Layout

We recommend using vertical Radio groups, especially with short option lists.

Required and optional

Generally, we recommend pre-selecting one of the radio buttons by default. However, there could be cases where the default selection could affect the user’s choice (the power of suggestion), and leaving all radio buttons unselected may provide a better user experience. Use required and optional indicators in those instances.

For complex forms, indicate required fields. This is the most explicit and transparent method and ensures users don’t have to make assumptions. Read more about best practices for marking required fields in forms.

For shorter, simpler forms (e.g., login/signup and feedback requests), indicate optional fields instead.

Error validation

For error validation recommendations, refer to the Form patterns documentation.

How to use this component

There are three ways to use the Radio component, across the <i80-radio> and <i80-radio-group> elements:

• the base control: an <i80-radio> with your own <input> written inside it
• the field: an <i80-radio> with a label attribute — the <input> control, with label, helper text, and error messaging (in a wrapping container)
• the group: an <i80-radio-group> around the fields — a legend (optional), a list of fields, and error messaging

The group

The basic invocation creates:

• a <fieldset> container.
• a <legend> element, from the legend attribute.
• a list of rendered radio fields.

The name attribute on the group offers an easy way to provide the same name for all the Radio controls in a single place.

<i80-radio-group legend="Choose datacenter" name="datacenter-demo1">
  <i80-radio label="NYC1" value="NYC1"></i80-radio>
  <i80-radio label="DC1" value="DC1"></i80-radio>
  <i80-radio label="NYC2" value="NYC2"></i80-radio>
  <i80-radio label="SF1" value="SF1"></i80-radio>
</i80-radio-group>

Layout

To better fit your spacing requirements, choose between two different layout orientations with the layout attribute: vertical or horizontal.

<i80-radio-group legend="Choose datacenter" name="datacenter-demo2" layout="vertical">
  <i80-radio label="NYC1" value="NYC1"></i80-radio>
  <i80-radio label="DC1" value="DC1"></i80-radio>
  <i80-radio label="NYC2" value="NYC2"></i80-radio>
  <i80-radio label="SF1" value="SF1"></i80-radio>
</i80-radio-group>
<i80-radio-group legend="Choose datacenter" name="datacenter-demo3" layout="horizontal">
  <i80-radio label="NYC1" value="NYC1"></i80-radio>
  <i80-radio label="DC1" value="DC1"></i80-radio>
  <i80-radio label="NYC2" value="NYC2"></i80-radio>
  <i80-radio label="SF1" value="SF1"></i80-radio>
</i80-radio-group>

Required vs. optional

Use the required and optional attributes to add a visual indication that the field is “required” or “optional”.

<i80-radio-group legend="Method" helper-text="Choose which HTTP method to use for the communication channel." name="method-demo2" layout="horizontal" required>
  <i80-radio label="POST" value="POST"></i80-radio>
  <i80-radio label="GET" value="GET"></i80-radio>
  <i80-radio label="PUT" value="PUT"></i80-radio>
</i80-radio-group>
<i80-radio-group legend="Method" helper-text="Choose which HTTP method to use for the communication channel." name="method-demo3" layout="horizontal" optional>
  <i80-radio label="POST" value="POST"></i80-radio>
  <i80-radio label="GET" value="GET"></i80-radio>
  <i80-radio label="PUT" value="PUT"></i80-radio>
</i80-radio-group>

Validation

To indicate a field is invalid, provide an error message: the error attribute on the group.

<i80-radio-group legend="Choose datacenter" name="datacenter-demo4" layout="horizontal" error="Error: you need to choose one datacenter.">
  <i80-radio label="NYC1" value="NYC1"></i80-radio>
  <i80-radio label="DC1" value="DC1"></i80-radio>
  <i80-radio label="NYC2" value="NYC2"></i80-radio>
  <i80-radio label="SF1" value="SF1"></i80-radio>
</i80-radio-group>

Field items

A group of Radios is made of one or more radio fields: <i80-radio> elements. All the attributes that can be passed to a single field can be passed to the same items inside the group.

<i80-radio-group legend="Choose datacenter" name="datacenter-demo5" layout="vertical">
  <i80-radio label="NYC1" value="NYC1" helper-text="CoreSite- 32 Avenue of the Americas" checked></i80-radio>
  <i80-radio label="DC1" value="DC1" helper-text="CoreSite- K Street"></i80-radio>
  <i80-radio label="NYC2" value="NYC2" helper-text="H5 Data Center - 325 Hudson Street"></i80-radio>
  <i80-radio label="SF1" value="SF1" helper-text="INAP - 650 Townsend Street"></i80-radio>
</i80-radio-group>

The field and the base control

The field and the base control are intended for rare cases where the group can’t be used and a custom implementation is needed. Most of the details for the field also apply to the base control, but see the Component API for more details.

The basic invocation for a field — an <i80-radio> with a label — creates:

• a <label> element with a for attribute automatically associated with the input ID attribute.
• a <input type="radio"> control with an automatically generated ID attribute.

<i80-radio label="SF1" name="data-center-radio" value="SF1"></i80-radio>

For the base control, write the <input type="radio"> inside the element with its own aria-label.

<i80-radio>
  <input type="radio" name="data-center-radio2" value="SF1" aria-label="San Francisco datacenter number 1">
</i80-radio>

Attributes

<i80-radio> renders this component. Everything it understands:

The tag keeps any native element you write inside it, so a server-rendered form, link or button works as it is. See Web Components for loading i80.js and the reference for these examples running.

Anatomy

A single radio

A group of radios

States

For general content recommendations, refer to the Primitives documentation.

Conformance rating

A group of radios

<i80-radio-group> is conformant when used as directed. It renders a real <fieldset> with the legend attribute as its <legend>, and passes its name to every <i80-radio> inside it, so the browser treats them as one radio group: Tab moves to the chosen radio (or the first one, if none is chosen) and the arrow keys move between them.

A single radio

<i80-radio> with a label is conformant: the label is a real <label for> pointing at the <input type="radio">, so clicking the text chooses it and the control has an accessible name.

A radio without a label

A radio is not conformant until it has an accessible name. If you leave the label attribute off, put an aria-label on the element instead, or write your own <label for="…"> and <input type="radio"> inside the tag.

Applicable WCAG Success Criteria

This section is for reference only, some descriptions have been truncated for brevity.

This component intends to conform to the following WCAG Success Criteria:

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.

0.1.0

Første i80-version (fork af upstream, se core/UPSTREAM.md).