Auswahlfeld
Auswahlfeld (native select) mit Optionen-Array, Zuständen und Formular-Tokens
Beispiele
Klein (sm) — dieselbe Höhe wie ui.button--sm
Gross (lg) — dieselbe Höhe wie ui.button--lg
Mit Platzhalter
Vorausgewählt
Fehlerzustand
Zahlungsart ist erforderlich.
Deaktiviert
Gruppen + deaktivierte Option
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| label | string | "" | Label |
| name * | string | — | Feldname |
| options * | array | — | Optionen |
| value | string | "" | Gewählter Wert |
| placeholder | string | "" | Platzhalter (leere Auswahl) |
| disabled | boolean | false | Deaktiviert |
| invalid | boolean | false | Fehlerzustand |
| hint | string | "" | Hinweis/Fehlertext |
| size | string: sm | md | lg | "md" | Groesse |
| required | boolean | false | Pflichtfeld (Marker + required) |
* Pflicht-Prop
Events & Slots
Events:
⚡ change — im Surface per on: {<event>: {action, params}} verdrahtbar.
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--select-background | var(--form-background) |
--select-border | var(--form-border) |
Genutzte Design-Tokens
border.hairlinecolor.border.errorcolor.status.dangercolor.text.defaultcolor.text.disabledcolor.text.mutedcontainer.smduration.fasteasing.standardfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultform.backgroundform.background-disabledform.borderform.border-focusform.border-hoverform.errorleading.baseradius.controlsize.1size.2size.3size.4text.lgtext.mdtext.smtext.xsweight.medium