# Switch

Ein Ein-/Ausschalter für eine Einstellung, mit dem Status daneben geschrieben. Es gilt, wenn die Person speichert, wie jedes Feld.

## Playground

```html
<label class="feitio-switch" data-on="An" data-off="Aus"><input type="checkbox" role="switch">E-Mail-Hinweise<span class="state">Aus</span></label>
```

## Wann verwenden

-   Um eine Einstellung auf oder ab in einer Einstellungsseite umzudrehen: Erinnerungen, Benachrichtigung, Funktion.

## Wann nicht verwenden

-   **Etwas zustimmen** (Richtlinien, Berechtigungen): Checkbox.
-   **Zwischen Optionen wählen:** Radios oder SegmentedControl.

## Beispiele

### In einem Einstellungsformular

Der Schalter ändert den geschriebenen Zustand sofort, aber die Einstellung wird erst angewendet, wenn die Person speichert; das Feedback zeigt im Formular an.

Code anzeigen

```html
<label class="feitio-switch">
  <input type="checkbox" role="switch" name="lembretes" checked>
  Lembretes do dia
  <span class="state">Ligado</span>
</label>
```

## States

Aus

RemindersOff

An

RemindersOn

Deaktiviert

RemindersOff

## Barrierefreiheit

-   Es ist ein Checkbox mit `role="switch"`: Screenreader verkünden "on" oder "off".
-   Der Zustand wird daneben ebenfalls geschrieben: die Position des Punkts reicht nicht aus.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-switch"`

auf dem `<label>`

Der Schalter, der Text und der Zustand.

`role="switch"`

am Input

Screenreader verkünden on oder off.

`class="state"`

der Zustand

"An" oder "Aus", in Worten.