Radio Button Group

Calcite Radio Button Group allows you to switch between horizontal and vertical layouts of Calcite 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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

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 leftMove focus and selection to previous item. If the current focus and selection is the first item, the focus and selection will cycle to the end
Arrow rightMove focus and selection to next item. If the current focus and selection is the last item, the focus and selection will cycle to the beginning
Arrow downMove focus and selection to previous item. If the current focus and selection is the first item, the focus and selection will cycle to the end
Arrow upMove focus and selection to next item. If the current focus and selection is the last item, the focus and selection will cycle to the beginning
TabMove focus in and out of component
Tab and ShiftMove 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

calcite-radio-button-group
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
disableddisabled

The disabled state of the radio button group.

booleanA boolean property should be present, or not
truefalse
hiddenhidden

The radio button group's hidden status. When a radio button group is hidden none of its options are focusable or checkable.

booleanA boolean property should be present, or not
truefalse
layoutlayout

The layout direction of the radio buttons in a group.

typedChoose from a set of typed values
gridhorizontal (default)vertical
namename

The name of the radio button group. `name` must be unique to other radio button group instances.

required
stringA custom string
undefined
requiredrequired

Requires that a value is selected for the radio button group before the parent form will submit.

booleanA boolean property should be present, or not
truefalse
scalescale

The scale (size) of the radio button group.

typedChoose from a set of typed values
lm (default)s

Events

NameDescriptionDetail
calciteRadioButtonGroupChange

Emitted when the radio button group has changed.

bubblescomposedcancelable
any

Slots

NameDescription
default (unnamed)

A slot for adding `calcite-radio-button`s.

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