RadioButton
The RadioButton component represents a mutually exclusive option within a set, allowing users to select a single choice from a predefined list.
When to use
- Mutually Exclusive Options: Implement
RadioButtonwhen users need to choose a single option from a set where only one selection is allowed. - Limited Choices: Use
RadioButtonfor relatively small sets of options (e.g., fewer than 5) to maintain clarity and simplicity. - Single Selection: When users are required to make a single, distinct choice from a group of options.
When not to use
- Large Sets of Options: Avoid
RadioButtonfor extensive lists; consider alternative components like checkboxes or dropdown menus for improved usability. - Multi-Selection: If users need to choose more than one option simultaneously, opt for checkboxes instead.
- Space Constraints: In situations with limited screen real estate, consider more compact components like dropdowns or toggle switches.
Alternative Components
- Checkboxes When multiple selections are allowed.
- Select For conserving space when dealing with a large set of options.
- Toggle Switches When a binary choice (on/off) is more appropriate than a list of options.
Accessibility Guidelines
- Keyboard Accessibility: Ensure users can navigate and select
RadioButtonusing keyboard controls. - Focus Styles: Clearly indicate the focus state for users navigating through the options using the keyboard.
- Aria Roles: Implement ARIA roles to enhance the accessibility of
RadioButtonfor screen readers. - Labeling: Provide clear and descriptive labels for each
RadioButtonto aid users with visual impairments. - Color Contrast: Maintain sufficient color contrast between the
RadioButtonand its surroundings to assist users with visual disabilities.