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

Select, switch or sort

Select options, switch views, or sort elements.

Reduce navigation depth

By using the Radio Button Group for switching views you easily avoid deep navigation and creates a better user experience.

Logical order

The order of the radio buttons should make logical sense, such as alphabetical or chronological order.

Content

Do

Use max 5 items per row.

Don't

Exceed maximum 5 items per row.

Do

Short, clear, and concise labels in a logical order.

Don't

Long or unclear labels.

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

Size 200

Size 200 is default and should always be used unless otherwise specified.

Size 100

Size 100 can be used when the layout hierarchy requires it.

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

1. Original
   
2. Stryktipset (‘Inverted’ variant)
   
3. Casino (‘Filled’ variant)
   
4. Racing (‘Filled’ variant)

Tur

1. Original
   
2. Lotto (‘Inverted’ variant)
   
3. Vikinglotto (‘Inverted’ variant)
   
4. 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.