Blueweb
How to use
A Radio button lets users select only one option from a list. When a user clicks one radio, all others in the same group are automatically unselected.
Use radio buttons when users must make a single choice from 2 or more clearly different options.
If the user can select more than one option, use Checkboxes instead.
Do’s and Don’ts
Do
Use aero-space-fix-md for related radios in a group.
Don't
Don’t place radios too close together, it makes scanning and tapping harder.
Do
Stack radios vertically for better readability.
Don't
Avoid horizontal alignment. It’s harder to scan, especially on smaller screens.
Accessibility
- Each radio must have a visible label.
- Group radios inside a <fieldset> with a <legend> when possible — this provides a clear context for screen readers.
- The user must be able to navigate between radios using the arrow keys.
- Only one radio can be selected at a time in a group. Ensure proper name attribute is used.
- If a radio option is disabled, use aria-disabled="true" or disable the input correctly.
Content
- Keep labels short and clear. 1 to 3 words is ideal.
-
Use sentence case (only the first letter in uppercase unless a proper noun).
Correct: “Window seat” – Incorrect: “WINDOW SEAT” - Make sure options are exclusive: they should not overlap in meaning.
- If needed, add a description below the group to explain context or consequences of the choice.
Availability
Each global component provides a shared design direction across platforms. Implementation is owned by each platform team, so development status may vary per platform.
Mobile
Kiosk
Design status
Ready