Checkbox
Ein Kasten zum Ankreuzen: Ja oder Nein für eine Sache, oder mehrere Auswahlmöglichkeiten in einer Gruppe.
Auf dieser Seite
Playground
Zustand
Hintergrund
<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
<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
Do and don't
Do
Kasten und Text gemeinsam klickbar, sowie der Haken in Tinte.
Don’t
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. |