# Checkbox.

## Overview

### What does the component do?

- It is used for the entry of yes/no values.

### When should the component be used?

- When selecting one or more options that are independent of one another.

### Rules

- A pre-selection is mandatory (active or inactive, no tristate).
- Several checkboxes 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 with two or three options and short names.
- The text can be multi-line.
- In addition to the actual checkbox, the entire text can also be used as a click target.

## Variants

### States

The component has the following states:

- Selected
- Unselected
- Indeterminate
- Disabled Selected
- Disabled Unselected
- Disabled Indeterminate
- Loading

### Variants

The component has the following variants:

- Checkbox
    - without icon / with Icon
- Checkbox-Item
    - listed / boxed
    - without icon / with icon
    - without subtext / with subtext
    - without button / with button

#### Checkbox

##### without icon

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

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

##### with icon

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

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

#### Checkbox-Item

##### List

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

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

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

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

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

##### List, with subtext

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

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

##### List, with button

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

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

##### List, loading

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

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

##### Boxed

![Image of the checkbox-item, boxed](https://digital.sbb.ch/assets/images/mobile/checkbox-item-boxed-light.webp "Checkbox-item, boxed")

![Image of the checkbox-item, boxed](https://digital.sbb.ch/assets/images/mobile/checkbox-item-boxed-dark.webp "Checkbox-item, boxed")

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

![Image of the checkbox-item, boxed, with icons (left and right)](https://digital.sbb.ch/assets/images/mobile/checkbox-item-boxed-icon-light.webp "Checkbox-item, boxed, with icons (left and right)")

![Image of the checkbox-item, boxed, with icons (left and right)](https://digital.sbb.ch/assets/images/mobile/checkbox-item-boxed-icon-dark.webp "Checkbox-item, boxed, with icons (left and right)")

##### Boxed, with subtext

![Image of the checkbox-item, boxed, with subtext](https://digital.sbb.ch/assets/images/mobile/checkbox-item-boxed-subtext-light.webp "Checkbox-item-boxed-subtext")

![Image of the checkbox-item, boxed, with subtext](https://digital.sbb.ch/assets/images/mobile/checkbox-item-boxed-subtext-dark.webp "Checkbox-item-boxed-subtext")

##### Boxed, with button

![Image of the checkbox-item, boxed, with button](https://digital.sbb.ch/assets/images/mobile/checkbox-item-boxed-button-light.webp "Checkbox-item, boxed, with button")

![Image of the checkbox-item, boxed, with button](https://digital.sbb.ch/assets/images/mobile/checkbox-item-boxed-button-dark.webp "Checkbox-item, boxed, with button")

##### Boxed, loading

![Image of the checkbox-item, boxed, loading](https://digital.sbb.ch/assets/images/mobile/checkbox-item-boxed-loading-light.webp "Checkbox-item, boxed, loading")

![Image of the checkbox-item, boxed, loading](https://digital.sbb.ch/assets/images/mobile/checkbox-item-boxed-loading-dark.webp "Checkbox-item, boxed, loading")

### Specification

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

---

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