Eingabefeld
Einzeiliges Formularfeld mit Label, Zuständen (disabled, invalid) und Formular-Tokens
Beispiele
Klein (sm) — dieselbe Höhe wie ui.button--sm
Gross (lg) — dieselbe Höhe wie ui.button--lg
Standard mit Label
Mit Wert + Hinweis
Wird für Rechnungen verwendet.
Fehlerzustand
IBAN ist unvollständig.
Deaktiviert
Passwort
Pflichtfeld + readonly-Beispiel
Wird vom System vergeben.
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| label | string | "" | Label |
| name * | string | — | Feldname (name-Attribut) |
| value | string | "" | Wert |
| placeholder | string | "" | Platzhalter |
| type | string: text | email | password | number | search | tel | url | "text" | Typ |
| 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) |
| readonly | boolean | false | Nur lesen |
* 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 |
|---|---|
--input-background | var(--form-background) |
--input-border | var(--form-border) |
--input-color | var(--color-text-default) |
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.errorform.placeholderleading.baseradius.controlshadow.insetsize.1size.2size.3size.4text.lgtext.mdtext.smtext.xsweight.medium