Radio Group

Calcite Radio Group is a single-choice selector in the form of rectangular visuals.

Overview

Radio Group is functionally similar to Radio Buttons, but visually more prominent. Some applications use Radio Group similarly to Tabs to switch views and navigate within an area. With the ability to choose between horizontal and vertical layouts, change appearance, and the ability to have supportive icons, Radio Group is a simple and strong component.

Usage

  • Need for more visual prominence than Radio Button
  • Workflow view switching
  • Single-choice interactions in forms

Sample

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

Best practices

Radio Group AppearanceUsage
SolidFor primary selections. Solid Radio Group items draw more attention than outline.
OutlineTo be used for secondary selections. Consists of text and a border with a foreground fill.
Correct Radio Group content length
Do use Radio Groups to switch among workflow choices.
Avoid Radio Group navigation
Avoid using Radio Groups as page navigation.

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 text for Radio Groups simple and succinct
  • Avoid using more than 1-2 words in each item
  • Do not use punctuation like commas or periods in Radio Group text
  • Do not use contractions (you're, aren't, can't, haven't) in order to reduce confusion
  • Avoid writing Radio Group text as questions
  • Recommended character maximum for each item: 20

API reference

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

Properties

PropertyAttributeDescriptionTypeValues
appearanceappearance

specify the appearance style of the radio group, defaults to solid.

typedChoose from a set of typed values
outlinesolid (default)
disableddisabled

is the radio group disabled

booleanA boolean property should be present, or not
truefalse
layoutlayout

specify the layout of the radio group, defaults to horizontal

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

The group's name. Gets submitted with the form.

stringA custom string
undefined
scalescale

The scale of the radio group

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

The group's selected item.

elementAn element
HTMLCalciteRadioGroupItemElement
valuevalue

The value of the selectedItem

stringA custom string
widthwidth

specify the width of the group, defaults to auto

typedChoose from a set of typed values
auto (default)full

Events

NameDescriptionDetail
calciteRadioGroupChange

Fired when the selected option changes, event detail is the new value

bubblescomposedcancelable
string

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding `calcite-radio-group-item`s.

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