Radio button definition and usage
Radio buttons are used when two or more options are mutually exclusive, meaning the user must select only one option.
radio-button
19 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Radio button use case: mutually exclusive choices
Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
Radio button: only one selection allowed
Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
Radio button placement in forms
Radio buttons can be used in tiles, data tables, modals, side panels, and in forms on full pages. They can also be used to change settings in a menu or component, and can act as a filtering mechanism.
Radio button vs checkbox: when not to use radio buttons
Do not use radio buttons when a user can select from multiple options. Use checkboxes instead when users need to select multiple items in a set, as radio buttons allow selection of only one item.
Radio button anatomy
The radio button component comprises: (1) Group label (optional) that describes the group of options or provides guidance for making a selection, (2) Radio button input that indicates the state of the radio button with no option preselected by default, and (3) Radio button label positioned to the right that describes the information to select or unselect.
Radio button label positioning
Radio button labels are positioned to the right of their inputs in left-to-right languages. For right-to-left languages, labels can be positioned to the left of inputs. Arrange radio button groups vertically when possible for easier reading.
Radio button spacing in forms
Radio buttons in a form should be placed at least 32px (layout-03) below or before the next component. Spacing of 24px (layout-02) or 16px (layout-01) can also be used when space is more restricted or if the form is more complex.
Radio button group label guidelines
A group label can accompany a set of radio buttons to provide further context or clarity. A group label should state the category of the grouping or concisely instruct what actions to take below depending on context. Use sentence case for group labels.
Radio button label content guidelines
Always use clear and concise labels for radio buttons. Labels appear to the right of radio button inputs. Labels should be fewer than three words when possible. Do not truncate radio button label text with an ellipsis. Long labels may wrap to a second line, and this is preferable to truncation. Text should wrap beneath the radio button so the control and label are top aligned.
Radio button states
Radio button input states are: unselected and selected. The default view is having no radio button preselected. Only one radio button should be selected at a time. Radio buttons also support states for focus, disabled, read-only, error, and warning.
Radio button group states
Radio button groups can receive the following states: read-only, disabled, error, and warning, as well as the addition of helper text.
Radio button mouse interaction
Users can trigger a radio button by clicking the radio button input directly or by clicking the radio button label. Having both regions interactive creates a more accessible click target.
Radio button keyboard navigation
By default, no option will be preselected. Users can navigate between radio button inputs by pressing Up or Down arrow keys. If a user lands on a radio button set without a default indicator, they can press Space to select the radio button or press an arrow key to select the next radio button.
Radio button with AI label
Radio button has a modification that embeds the AI label when AI is present in the control. The AI variant functions the same as the normal version except with the addition of the AI label which is both a visual indicator and the trigger for the explainability popover. The AI label can be placed on the radio button group label or on individual radio button labels.
Radio button vs checkbox
Radio buttons allow users to select one option from a group of mutually exclusive choices, while checkboxes allow for selection of one or more options from a group. Use checkboxes when multiple selections are allowed.
Radio button vs selectable tile
Radio buttons should have concise, easy to compare options. If more information is required to make a choice, like pricing plans or additional links, consider using a selectable tile instead.
Radio button vs toggle switch
Toggle switches are preferred when user options are limited to two choices (on/off or true/false). Radio buttons can have many other options beyond two choices.
Radio button vs structured list
If a user needs to choose a singular item from a list that has simple data and multiple columns, a selectable structured list can be used instead of radio buttons.