Eingabefeld — ui.input
Einzeiliges Formularfeld mit Label, Zuständen (disabled, invalid) und Formular-Tokens
UI Elementv1.3.0Formulareweb.documentweb.applicationdesktop.shell
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 |
|---|---|---|
label | string | "" |
name * | string | — |
value | string | "" |
placeholder | string | "" |
type | string: text | email | password | number | search | tel | url | "text" |
disabled | boolean | false |
invalid | boolean | false |
hint | string | "" |
size | string: sm | md | lg | "md" |
required | boolean | false |
readonly | boolean | false |
Events & Slots
Events: change
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--input-background | var(--form-background) |
--input-border | var(--form-border) |
--input-color | var(--color-text-default) |
Genutzte Design-Tokens
border.hairline color.border.error color.status.danger color.text.default color.text.disabled color.text.muted container.sm duration.fast easing.standard focus.ring-color focus.ring-offset focus.ring-width font.family.default form.background form.background-disabled form.border form.border-focus form.border-hover form.error form.placeholder leading.base radius.control shadow.inset size.1 size.2 size.3 size.4 text.lg text.md text.sm text.xs weight.medium