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.
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 |
| labelText | label-text | When provided, displays label text on the component. | string | |
| layout | layout | Defines the layout of the component. [Deprecated] The "grid" value is deprecated, use "horizontal" instead. | "grid" | "horizontal" | "vertical" | "horizontal" |
| messageOverrides | Use this property to override individual strings used by the component. | Record<string, unknown> | ||
| 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-buttons. |
| label-content | A slot for rendering content next to the component's labelText. |
Styles
| Name | Description |
|---|---|
| --calcite-radio-button-group-gap | Specifies the space between slotted components in the component. |
| --calcite-radio-button-input-message-spacing | Specifies the margin spacing at the top of the input-message component. |
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(options?: FocusOptions): Promise<void> |