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