# Toggle-Check

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Form
- Status: Gestaltungsrichtlinien vollständig

## Links

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

## Elemente

- `sbb-toggle-check`: It displays a toggle checkbox.

## Verwandte Komponenten

- Ähnlich: [Checkbox](https://digital.sbb.ch/de/design-system/lyne/components/checkbox/index.md)

## Übersicht

### Was macht die Komponente?
Ein Toggle-Check schaltet zwischen zwei Zuständen um, z.B. "ein" und "aus". Er verhält sich wie eine [Checkbox](https://digital.sbb.ch/de/design-system/lyne/components/checkbox/).

### Wann soll die Komponente eingesetzt werden?
* Um eine Funktion oder Einstellung ein- oder auszuschalten, die sofort wirkt.

### Regeln.
* Für Auswahlen in Formularen, die erst nach dem Absenden gelten, die Checkbox verwenden.
* Der Toggle-Check braucht ein Label. Ohne sichtbares Label ein `aria-label` setzen.
* Keine weiteren interaktiven Elemente im Label platzieren.

## Implementation (Web Components, Englisch)

The `<sbb-toggle-check>` is a component which provides the same functionality as a native `<input type="checkbox" />`
enhanced with the SBB Design.

```html
<sbb-toggle-check name="check" value="single-checkbox">Example</sbb-toggle-check>
```

### Slots

It is possible to provide a label via an unnamed slot; the component can optionally display a `<sbb-icon>`
using the `iconName` property or via custom content using the `icon` slot.
The icon can be at the component start or end based on the value of the `labelPosition` property (default: `after`).

```html
<sbb-toggle-check name="check" value="single-checkbox" icon-name="pie-small">
  Example
</sbb-toggle-check>

<sbb-toggle-check name="other" value="single-checkbox" icon-name="pie-small" label-position="start">
  Another example
</sbb-toggle-check>
```

### States

The component can be displayed in `checked` or `disabled` states using the self-named properties.

```html
<sbb-toggle-check name="check" value="Value" checked>Option</sbb-toggle-check>

<sbb-toggle-check name="other" value="Value" disabled>Option</sbb-toggle-check>
```

### Style

The component has three different sizes (`xs`, `s` and `m`),
which can be changed using the `size` property.

```html
<sbb-toggle-check size="m" value="single-checkbox"> Example in m size</sbb-toggle-check>

<sbb-toggle-check size="xs" value="single-checkbox"> Example in xs size </sbb-toggle-check>
```

### Events

Consumers can listen to the native `change` event on the `<sbb-toggle-check>` component to intercept the input's change;
the current state can be read from `event.target.checked` and the value from `event.target.value`.

### Accessibility

The component provides the same accessibility features as the native checkbox.

Avoid adding other interactive controls into the content of `<sbb-toggle-check>`, as this degrades the experience for users of assistive technology.

If you don't want the label to appear next to the `<sbb-toggle-check>` component,
you can not provide it and then use `aria-label` to specify an appropriate label for screen-readers.

```html
<sbb-toggle-check aria-label="Subscribed to email message"></sbb-toggle-check>
```

### Complex Values

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

```html
<sbb-toggle-check .value=${{value: 'value', name: 'name'}} name="name">Toggle Check</sbb-toggle-check>
```

## API (Web Components, Englisch)

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