# Radio-Button.

## Overview

### What does the component do?

- It is used for the selection of exactly one option from several.

### When should the component be used?

- When there are two or more options and the options mutually exclude one another.

### Rules

- There must be a choice of at least two options.
- A pre-selection is mandatory.
- Radio buttons can be arranged vertically or horizontally. The vertical layout is preferred as it allows the user to understand the options more quickly.
- Horizontal layout only for two to three options and short names.
- The text can be multi-line.
- As well as the actual radio button, the entire text also serves as a click target.

## Variants

### States

The component has the following states:

- Checked
- Unchecked
- Disabled checked
- Disabled unchecked
- Loading

### Variants

The component has the following variants:

- Radiobutton
    - with icon / without icon
- Radiobutton-Item
    - listed / boxed
    - without icon / with icon
    - without subtext / with subtext
    - without button / with button

#### Radiobutton

##### without icon

![Image of a radiobutton, without icon](https://digital.sbb.ch/assets/images/mobile/radiobutton-default-light.webp "Radiobutton, without icon")

![Image of a radiobutton, without icon](https://digital.sbb.ch/assets/images/mobile/radiobutton-default-dark.webp "Radiobutton, without icon")

##### with icon

![Image of a radiobutton, with icon](https://digital.sbb.ch/assets/images/mobile/radiobutton-icon-light.webp "Radiobutton, with icon")

![Image of a radiobutton, with icon](https://digital.sbb.ch/assets/images/mobile/radiobutton-icon-dark.webp "Radiobutton, with icon")

#### Radiobutton-Item

##### List

![Image of a radiobutton-item in a list, default](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-list-light.webp "Radiobutton-item in a list, default")

![Image of a radiobutton-item in a list, default](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-list-dark.webp "Radiobutton-item in a list, default")

##### List, with icons (left and right)

![Image of a radiobutton-item in a list, with icons](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-list-icon-light.webp "Radiobutton-item in a list, with icons")

![Image of a radiobutton-item in a list, with icons](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-list-icon-dark.webp "Radiobutton-item in a list, with icons")

##### List, with subtext

![Image of a radiobutton-item in a list, with subtext](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-list-subtext-light.webp "Radiobutton-item in a list, with subtext")

![Image of a radiobutton-item in a list, with subtext](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-list-subtext-dark.webp "Radiobutton-item in a list, with subtext")

##### List, with button

![Image of a radiobutton-item in a list, with button](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-list-button-light.webp "Radiobutton-item in a list, with button")

![Image of a radiobutton-item in a list, with button](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-list-button-dark.webp "Radiobutton-item in a list, with button")

##### List, loading

![Image of a radiobutton-item in a list, loading](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-list-loading-light.webp "Radiobutton-item in a list, loading")

![Image of a radiobutton-item in a list, loading](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-list-loading-dark.webp "Radiobutton-item in a list, loading")

##### Boxed

![Image of a radiobutton-item in a box, default](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-boxed-light.webp "Radiobutton-item in a box, default")

![Image of a radiobutton-item in a box, default](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-boxed-dark.webp "Radiobutton-item in a box, default")

##### Boxed, with icons (left and right)

![Image of a radiobutton-item in a box, with icons](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-boxed-icon-light.webp "Radiobutton-item in a box, with icons")

![Image of a radiobutton-item in a box, with icons](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-boxed-icon-dark.webp "Radiobutton-item in a box, with icons")

##### Boxed, with subtext

![Image of a radiobutton-item in a box, with subtext](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-boxed-subtext-light.webp "Radiobutton-item in a box, with subtext")

![Image of a radiobutton-item in a box, with subtext](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-boxed-subtext-dark.webp "Radiobutton-item in a box, with subtext")

##### Boxed, with button

![Image of a radiobutton-item in a box, with button](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-boxed-button-light.webp "Radiobutton-item in a box, with button")

![Image of a radiobutton-item in a box, with button](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-boxed-button-dark.webp "Radiobutton-item in a box, with button")

##### Boxed, loading

![Image of a radiobutton-item in a box, loading](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-boxed-loading-light.webp "Radiobutton-item in a box, loading")

![Image of a radiobutton-item in a box, loading](https://digital.sbb.ch/assets/images/mobile/radiobutton-item-boxed-loading-dark.webp "Radiobutton-item in a box, loading")

### Specification

[Design](https://www.figma.com/design/ZBotr4yqcEKqqVEJTQfSUa/Design-System-Mobile?node-id=124-4934&t=N7M8b5Y9aIJc4LzY-1)

---

Source: https://digital.sbb.ch/en/design-system/mobile/components/radio-button/