Fieldset
Die Überschrift einer Gruppe von Feldern oder Optionen, die eine einzige Frage beantworten.
Auf dieser Seite
Playground
Hinweis
Hintergrund
<fieldset class="feitio-fieldset"><legend class="feitio-label">Benachrichtigen per</legend><div class="feitio-choices"><label class="feitio-choice"><input type="checkbox" checked>Discord</label><label class="feitio-choice"><input type="checkbox">E-Mail</label></div></fieldset>Wann verwenden
- Um Radios und Checkbox-Gruppen, immer.
- Für Felder, die eine Sache sind: die Zeit, eine Adresse.
Wann nicht verwenden
- Um Teile einer langen Seite zu trennen: Überschriften und Blöcke.
Beispiele
Eine Gruppe mit der Frage
Der Titel ist die Frage; der Hinweis sitzt direkt darunter (space-1); die Gruppe etwas weiter (space-3); die Gruppenfehlermeldung space-2 von der letzten Option entfernt.
Code anzeigen
<fieldset class="feitio-fieldset">
<legend class="feitio-label">Quando lembrar?</legend>
<span class="feitio-hint">Horário de São Paulo</span>
…
</fieldset>Anatomie
- Titel: die Frage der gesamten Gruppe.
- Hinweis, optional: direkt unter dem Titel (
space-1). - Die Gruppe: Optionen oder Felder, etwas weiter (
space-3).
Barrierefreiheit
- Der
<legend>wird vor jedem Feld der Gruppe angekündigt: schreiben Sie es als Frage. - Gruppenfehler: die Meldung direkt unter den Optionen, mit dem Icon, in Weinrot.
Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="feitio-fieldset" | erforderlich | Die getitelte Gruppe, mit der Skalierungsräume. |
<legend> | die Frage | Der Titel der Gruppe. |
class="feitio-hint" | optional | Der Hinweis space-1 aus dem Titel. |
aria-invalid="true" | ein Fehler | Die Nachricht unter der Gruppe. |