Components
Radio Button Group
Radio Button Groups are useful when users need to select a single option from a set of choices, such as when switching between views or sorting elements.
Interactive demo
This demo lets you preview the Radio Button Group component, its variations, and configuration options. Each tab displays a different type of variant.
<CodeViewerExample> <RadioGroup size={200}> <RadioButton onChange={function noRefCheck() {}} value="123" > Radio Button </RadioButton> <RadioButton onChange={function noRefCheck() {}} value="123" > Radio Button </RadioButton> <RadioButton onChange={function noRefCheck() {}} value="123" > Radio Button </RadioButton> </RadioGroup> </CodeViewerExample>
Usage
Principles
Content
Formatting
Anatomy
The Radio Button Group is a group of buttons with one button selected at a time. It's contained within a container.
A. Container
B. Enabled
C. Selected
All items in the Radio Button Group are set to fill the container, ensuring consistent width for all containers regardless of group width.
Variants
Inverted
Use the default Radio Button Group on light surfaces and ensure it meets a11y guidelines. Use the inverted variant on darker surfaces."
Thin border (only for Sport & Casino)
Radio Button Group ‘thin’ is only used on Svenska Spel Sport and should never be used anywhere else.
Number of items
Radio Button Groups should have no more than 5 items per row to ensure optimal legibility and avoid clutter. If there are more than 5 items, consider breaking them into multiple groups or using a different interface element such as a dropdown or a list.
Single row 2-5
For single row use.
Multilple row
When you want to sort items in rows.
Branding
When branding the ‘Radio Button Group’ change the selected color to the brand color. See example 2 for more information on how.
Anatomy
A. Branded area (fill)
B. Container
Branding colors
Use the default brand color for all branding purposes, as shown in the image. Never use the one that ends with a number (brand-000).
On brand color
When using brand colors with the Radio Button Group, be sure to choose the inverted variant or the filled variant (when necessary) to meet a11y guidelines for optimal visual contrast.
Sport & Casino
- Original
- Stryktipset (‘Inverted’ variant)
- Casino (‘Filled’ variant)
- Racing (‘Filled’ variant)
Tur
- Original
- Lotto (‘Inverted’ variant)
- Vikinglotto (‘Inverted’ variant)
- Triss (‘Inverted’ variant)
Examples of proper usage
Here are some examples to help you better understand how and when to use the Radio Button Group.
Switching views
Here's an example of how Lotto uses the Radio Button Group to improve navigation between different game types and avoid deep navigation.
Selecting
Here's an example of using a Radio Button Group to select the game length.