Radio Button Group

Radio Button Group allows you to switch between horizontal and vertical layouts of Radio Buttons.

Overview

Built of Radio Buttons, you can control the group's scale, layout, and state in a single wrapper.

Usage

  • Groups of Radio Buttons
  • Easy switching between vertical and horizontal layouts for responsive design

Sample

Best practices

Below are important guidelines on using the Radio Button Group component.

Correct Radio Button content amount
Do use Radio Buttons in small groups.
Avoid Radio Button content amount
Avoid large radio button groups. Prefer Combobox for this type of selection.

Accessibility

Keyboard navigation

KeyFunction
Arrow leftMoves focus and selection to previous calcite-radio-button. If the current focus and selection is the first calcite-radio-button, the focus and selection will cycle to the last calcite-radio-button.
Arrow rightMoves focus and selection to next calcite-radio-button. If the current focus and selection is the last calcite-radio-button, the focus and selection will cycle to the first calcite-radio-button.
Arrow downMoves focus and selection to previous calcite-radio-button. If the current focus and selection is the first calcite-radio-button, the focus and selection will cycle to the last calcite-radio-button.
Arrow upMoves focus and selection to next calcite-radio-button. If the current focus and selection is the last calcite-radio-button, the focus and selection will cycle to the first calcite-radio-button.
TabMoves focus in and out of component.
Tab and ShiftMoves focus in and out of component.

Writing and copy

  • Keep Radio Button tone and length consistent within groups
  • Avoid forming questions with Radio Button text

API reference

Properties

Slots

Events

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.