@spectrum-web-components/radio

Overview

and allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.

$3


``zsh
yarn add @spectrum-web-components/radio
`

Import the side effectful registration of or via:

`js
import '@spectrum-web-components/radio/sp-radio.js';
import '@spectrum-web-components/radio/sp-radio-group.js';
`

When looking to leverage the Radio or RadioGroup base classes as a type and/or for extension purposes, do so via:

`js
import { Radio, RadioGroup } from '@spectrum-web-components/radio';
`

$3

holds a list of elements, and is responsible for deselecting radio buttons when a new one is selected, which in turn makes it responsible for keeping track of which one is selected. is responsible for handling user interactions and for visually reflecting if it is the one that is checked or not.

`html

Option 1
Option 2
Option 3
Option 4

`

#### Label

The elements are labelled with text in their default slot.

`html

Option 1
Option 2
Option 3
Option 4

`

$3

#### Sizes


Small


`html

Option 1
Option 2
Option 3
Option 4

`


Medium


`html

Option 1
Option 2
Option 3
Option 4

`


Large


`html

Option 1
Option 2
Option 3
Option 4

`


Extra Large


`html

Option 1
Option 2
Option 3
Option 4

`

#### Styles

Standard radio buttons are the default style for radio buttons. They are optimal for application panels where all visual elements are monochrome in order to direct focus to the content.

Emphasized radio buttons are a secondary style for radio buttons. The blue color provides a visual prominence that is optimal for forms, settings, etc. where the radio buttons need to be noticed.


Standard


`html


`html


Event handlers for clicks and other user actions can be registered on an similar to a standard element.

`html

Web component

``

$3

Tabbing into a group of radio buttons places the focus on the first radio button selected. If none of the radio buttons are selected, the focus is set on the first one in the group. Space selects the radio button in focus (if not already selected). Using the arrow keys moves focus and selection to the previous or next radio button in the group (last becomes first, and first becomes last). The new radio button in focus gets selected even if the previous one was not.

#### Provide a label

Radio groups and radio items should always have labels.