Auswahlfeld @select
Standard @select
<!-- Standard -->
<select class="select">
<option class="select__hint" disabled="disabled" selected="selected" value="">alle</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
{
"hasPleaseSelectOption": true,
"options": [
"Option 1",
"Option 2",
"Option 3"
]
}
Group @select--group
<!-- Group -->
<select class="select">
<option class="select__hint" disabled="disabled" selected="selected" value="">alle</option>
<optgroup label="grundständig">
<option>alle grundständigen Abschlüsse</option>
<option>Bachelor</option>
<option>Lehramt</option>
<option>Staatsexamen (außer Lehrämter)</option>
<option>Konzertexamen</option>
<option>Kirchliches Examen / Diplom</option>
</optgroup>
<optgroup label="weiterführend">
<option>alle weiterführenden Abschlüsse</option>
<option>Master</option>
<option>Promotion</option>
</optgroup>
</select>
{
"hasPleaseSelectOption": true,
"groups": [
{
"label": "grundständig",
"options": [
"alle grundständigen Abschlüsse",
"Bachelor",
"Lehramt",
"Staatsexamen (außer Lehrämter)",
"Konzertexamen",
"Kirchliches Examen / Diplom"
]
},
{
"label": "weiterführend",
"options": [
"alle weiterführenden Abschlüsse",
"Master",
"Promotion"
]
}
]
}
Ausgewählt @select--selected
Deaktiviert @select--disabled
<!-- Deaktiviert -->
<select class="select" disabled="disabled">
<option class="select__hint" disabled="disabled" selected="selected" value="">alle</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
{
"hasPleaseSelectOption": true,
"disabled": true,
"options": [
"Option 1",
"Option 2",
"Option 3"
]
}
Ungültig @select--invalid
<!-- Ungültig -->
<select class="select" required="required" aria-invalid="true">
<option class="select__hint" disabled="disabled" selected="selected" value="">alle</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
{
"hasPleaseSelectOption": true,
"invalid": true,
"required": true,
"options": [
"Option 1",
"Option 2",
"Option 3"
]
}