# Checkbox

Ein Kasten zum Ankreuzen: Ja oder Nein für eine Sache, oder mehrere Auswahlmöglichkeiten in einer Gruppe.

## Playground

```html
<label class="feitio-choice"><input type="checkbox">Auf Discord benachrichtigen</label>
```

## Wann verwenden

-   Um nichts auszuwählen, eine oder mehrere Optionen aus einer Liste.
-   Selbstständig, um etwas zu zustimmen.

## Wann nicht verwenden

-   **Mutuell ausschließende Optionen:** Radios.
-   **Eine Einstellung ein- und ausschalten:** Switch.

## Beispiele

### Eine Gruppe

Titel und Hinweis zusammen (`space-1`), die Optionen direkt darunter (`space-3`) und `space-2` zwischen den Optionen. Der Haken ist in Tinte: Orange bleibt für die Hauptaktion.

Code anzeigen

```html
<fieldset class="feitio-fieldset">
  <legend class="feitio-label">Avisar por</legend>
  <span class="feitio-hint">Marque quantos quiser</span>
  <div class="feitio-choices">
    <label class="feitio-choice"><input type="checkbox" name="avisar" value="discord" checked>Discord</label>
    <label class="feitio-choice"><input type="checkbox" name="avisar" value="email">E-mail</label>
  </div>
</fieldset>
```

## States

Nicht angekreuzt

Notify a day before

Angekreuzt

Notify a day before

Gruppenfehler

Benachrichtigen durch

DiscordE-mail

Pick at least one

Deaktiviert

WhatsApp (soon)

## Do and don't

Do

Notify a day beforeNotify an hour before

Kasten und Text gemeinsam klickbar, sowie der Haken in Tinte.

Don’t

Notify a day beforeNotify an hour before

Orange Haken konkurrieren mit dem Speichern-Button um das Orange.

## Barrierefreiheit

-   Der gesamte Text ist klickbar, nicht nur das Feld.
-   In einer Gruppe gibt das Fieldset den Titel; der Gruppenfehler erscheint einmal, unter den Optionen.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-choices"`

um die Optionen herum

`space-2` zwischen den Optionen.

`class="feitio-choice"`

auf dem `<label>`

Kasten und Text gemeinsam klickbar.

`checked`, `disabled`

—

Gehäkert; deaktiviert.

`aria-invalid="true"`

am Fieldset

Gruppenfehler, unter den Optionen.