# Toggle

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: Hauptelement mit Bestandteilen; Bestandteile nur innerhalb des jeweiligen Elements verwenden
- Kategorien: Form
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/toggle/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-toggle--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/toggle/overview (API: https://lyne-angular.app.sbb.ch/angular/components/toggle/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-67
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/toggle

## Elemente

- `sbb-toggle`: It can be used as a container for two `sbb-toggle-option`, acting as a toggle button.
  - `sbb-toggle-option`, nur innerhalb von `sbb-toggle`: It displays a toggle option within a `sbb-toggle`.

## Übersicht

### Was macht die Komponente?
Ein Toggle besteht aus zwei Optionen, zwischen denen Nutzende umschalten, um die Ansicht des Inhalts zu wechseln, z.B. "Liste" und "Karte".

### Wann soll die Komponente eingesetzt werden?
* Um zwischen gleichwertigen Ansichten desselben Inhalts zu wechseln.

### Regeln.
* Die Optionen sind kurz beschriftet, mit Text, Icon oder beidem.
* Genau eine Option ist immer gewählt.
* Für Ein/Aus-Einstellungen den [Toggle-Check](https://digital.sbb.ch/de/design-system/lyne/components/toggle-check/) verwenden, für Navigation [Tabs](https://digital.sbb.ch/de/design-system/lyne/components/tabs/).

## Implementation (Web Components, Englisch)

The `<sbb-toggle>` component is a wrapper for `<sbb-toggle-option>` elements
that can be selected by the user; it is useful for switching between views within the content.

```html
<sbb-toggle value="Value 1">
  <sbb-toggle-option value="Value 1" icon-name="arrow-right-small">Bern</sbb-toggle-option>
  <sbb-toggle-option value="Value 2" icon-name="arrows-right-left-small">Zürich</sbb-toggle-option>
</sbb-toggle>
```

### Configuration

#### `<sbb-toggle>`

The `even` property can be used to let the component expand to the parent component or adapt to the label's width.

The component has two different sizes, `s` and `m`, which can be set using the `size` property.

```html
<sbb-toggle size="s" even> ... </sbb-toggle>
```

#### `<sbb-toggle-option>`

It is possible to provide a label via an unnamed slot; the component can optionally display an `<sbb-icon>`
at the component start using the `iconName` property or via custom content using the `icon` slot.
Text and icon are not exclusive and can be used together.

```html
<sbb-toggle-option value="Value" icon-name="app-icon-small"></sbb-toggle-option>

<sbb-toggle-option value="Value" icon-name="app-icon-small">Option</sbb-toggle-option>
```

### Complex Values

This component supports any types of values, including complex objects.
The type can be specified using the generic type parameter `T` of `SbbToggle<T>`.

```ts
const values = [
  { value: 'value 1', name: 'Option 1' },
  { value: 'value 2', name: 'Option 2' },
];
```

```html
<sbb-toggle .value="${values[0]}" name="name">
  <sbb-toggle-option .value="${values[0]}">Option 1</sbb-toggle-option>
  <sbb-toggle-option .value="${values[1]}">Option 2</sbb-toggle-option>
</sbb-toggle>
```

## API (Web Components, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/toggle/api.md