Navigieren auf digital.sbb.ch

Zur Startseite von digital.sbb.ch

Toggle

1. What does the component do?

It provides the user with a selection of precisely two options.

2. When should the component be used?

For either/or selection of key values which should be displayed prominently.

3. Rules

  • The first option is always pre-selected as standard.
  • The text of the options can be multi-line.
  • The text of the option can be preceded by an icon to make it easier to understand.

4. Variants

The component has the following statuses:

  • First (first option selected)
  • Second (second option selected)

4.1 Standard

Image of the toggle button component in the standard variant

Design specification

Code specification

4.2 With icon

Image of the toggle button component with icons

Design specification

Code specification

4.3 With info text

Image of the toggle button component with additional information text

Design specification

Code specification

4.4 With additional entry context

Image of the toggle button component with additional entry context

Design specification

Code specification