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
<calcite-radio-button-group name="Options" layout="vertical">
<calcite-label layout="inline">
<calcite-radio-button value="trees"></calcite-radio-button>
Trees
</calcite-label>
<calcite-label layout="inline">
<calcite-radio-button value="shrubs"></calcite-radio-button>
Shrubs
</calcite-label>
<calcite-label layout="inline">
<calcite-radio-button value="flowers"></calcite-radio-button>
Flowers
</calcite-label>
<calcite-label layout="inline">
<calcite-radio-button value="groundcover"></calcite-radio-button>
Groundcover
</calcite-label>
<calcite-label layout="inline">
<calcite-radio-button value="bushes"></calcite-radio-button>
Bushes
</calcite-label>
</calcite-radio-button-group>
Best practices
Below are important guidelines on using the Radio Button Group component.

Accessibility
Keyboard navigation
Key | Function |
---|---|
Arrow left | Moves 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 right | Moves 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 down | Moves 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 up | Moves 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 . |
Tab | Moves focus in and out of component. |
Tab and Shift | Moves 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
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
disabled | disabled | When true , interaction is prevented and the component is displayed with lower opacity. | boolean | false |
layout | layout | Defines the layout of the component. | "grid" | "horizontal" | "vertical" | "horizontal" |
name | name | Specifies the name of the component on form submission. Must be unique to other component instances. | string | |
required | required | When true and the component resides in a form,
the component must have a value in order for the form to submit. | boolean | false |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
selectedItem | Specifies the component's selected item. | HTMLCalciteRadioButtonElement | ||
status | status | Specifies the status of the validation message. | "idle" | "invalid" | "valid" | "idle" |
validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | |
validationMessage | validation-message | Specifies the validation message to display under the component. | string |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding calcite-radio-button s. |
Events
Name | Description | Behavior |
---|---|---|
calciteRadioButtonGroupChange | Fires when the component has changed. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
setFocus | Sets focus on the fist focusable calcite-radio-button element in the component. | setFocus(): Promise<void> |