Radio button lists generally provide a clearer overview of the users’ choices than a dropdown menu, especially when the text label is long or might be obscured in a dropdown.
Conventional radio button
- Used in forms
- Must be positioned among themselves as close as possible, as users are working off one step after the other in a form.
- No pictures or graphics are used, the only exception being the error icons for the validation, as well as the info icon of a tool tip
For an example of how to use radio buttons in a form, please see contact form example.
Radio container inline
- Used on order flows, configuration pages, dashboards with graphical elements to guide the users through a selection.
- Can be positioned among themselves or side by side.
- Can have an sdx-icon.
- Can have headlines with additional descriptive text.
- Can have a right-slot next to the label to display additional information (for example a price label).
- Can have a slot below the label and description to display an additional image.
Flex width
Fixed width
Radio container with right slot
Radio container with image
Radio container in grid layout
Indicator-less Container
Use theme="indicator-less" with the addition of sdx-card as slot to display selectable cards.