Data Entry
A radio group is a grouping of radio buttons that are related to each other.
Radio groups should always have a label (usually a legend within a fieldset). In rare cases where context is sufficient and the UX Team have reviewed the design, the label could be undefined. Radio groups without a visible label should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”).
Radio groups can be either horizontal or vertical. By default, radio groups are vertical. Use a horizontal radio group when vertical space is limited.
By default, radio buttons are not emphasized. This option is best for when the radio button is not the core part of an interface, such as in application panels, where all visual components are monochrome in order to direct focus to the content. The Primary, or emphasized, version provides a visual prominence that is best for forms, settings, lists or grids of assets, and other situations where a radio button needs to be noticed.
The Bordered variant provides a higher level of visual prominence that is best for situations such as a questionnaire or survey where a radio group is the primary component on a page. These work particularly well on touch screen devices as the target area is more clearly visible.
Radio groups can be marked as optional depending on the situation. Optional radio groups are denoted with text added to the end of the label — “(optional)”.
Radio groups can be marked as having an error to show that a selection needs to be made in order to move forward, or that a selection that was made is invalid. The error is indicated with negative help text, along with an icon.
A radio group in a disabled state shows that a selection exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that an action may become available later. The field label, radio buttons, and help text are all displayed in a disabled state when the radio group is disabled.
A radio group has a read-only option for when it's in the disabled state but still needs content to be shown. This allows for content to be copied, but not interacted with or changed.
Radio groups should use help text for error messaging and descriptions. Descriptions are valuable for giving context behind why a selection is required, or for clarifying the options.
A radio button can be navigated using a keyboard. The keyboard focus state takes the radio button's visual hover state and adds a ring to the radio button in focus, copying the color style of the variant.
When the option label is too long for the horizontal space available, it wraps to form another line.
When a radio button group presents multiple values that are not identical, the group should not show a selection. Any subsequent selection should update all values.
Radio buttons when checked can reveal additional, conditional content.
Description and implementation notes
<p> code example </p>Includes all interactive states that are applicable (hover, down, focus, keyboard disabled).
Works properly across all color schemes (light, dark).
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc).
Includes guidelines for keyboard focus, layout(wrapping, truncation, overflow) animation, interactions etc.
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
Includes a downloadable Figma file that shows multiple options, states, color themes, and platform scales.