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
Best practices
| Radio Group Appearance | Usage |
|---|---|
| Solid | For primary selections. Solid Radio Group items draw more attention than outline. |
| Outline | To be used for secondary selections. Consists of text and a border with a foreground fill. |
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Arrow left | Move 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 right | Move 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 down | Move 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 up | Move 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 |
Tab | Move focus in and out of component |
Tab and Shift | Move 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
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| appearance | appearance | specify the appearance style of the radio group, defaults to solid. | outlinesolid (default) | |
| disabled | disabled | is the radio group disabled | truefalse | |
| layout | layout | specify the layout of the radio group, defaults to horizontal | gridhorizontal (default)vertical | |
| name | name | The group's name. Gets submitted with the form. | undefined | |
| scale | scale | The scale of the radio group | lm (default)s | |
| selectedItem | The group's selected item. | HTMLCalciteRadioGroupItemElement | ||
| value | value | The value of the selectedItem | ||
| width | width | specify the width of the group, defaults to auto | auto (default)full |
Events
| Name | Description | Detail |
|---|---|---|
| calciteRadioGroupChange | Fired when the selected option changes, event detail is the new value | string |
Methods
| Name | Description | Signature | Returns |
|---|---|---|---|
| setFocus | Sets focus on the component. | setFocus() => Promise<void> | Promise<void> |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding `calcite-radio-group-item`s. |