Eingabegruppe — component.input-group

Componentv1.0.0Formulareweb.documentweb.applicationdesktop.shell

Beispiele

Preisfeld (€-Prefix)

Verkaufspreis€Brutto inkl. MwSt.

Einheit als Suffix

Gewichtkg

Suche mit Icon

Fehlerzustand

Rabatt%Maximal 100 % möglich.

Eigenschaften

Prop	Typ	Default
`label`	string	`""`
`name`	string	`""`
`value`	string	`""`
`placeholder`	string	`""`
`type`	string: text \| number \| search \| email \| url \| tel	`"text"`
`prefix`	string	`""`
`suffix`	string	`""`
`prefixIcon`	string	`""`
`suffixIcon`	string	`""`
`disabled`	boolean	`false`
`invalid`	boolean	`false`
`hint`	string	`""`

Stellschrauben (Komponenten-Tokens)

Token	Default
`--input-group-border`	`var(--form-border, var(--color-border-default))`
`--input-group-background`	`var(--form-background, var(--color-surface-default))`
`--input-group-addon-background`	`var(--color-surface-sunken)`
`--input-group-radius`	`var(--radius-control)`

Genutzte Design-Tokens

border.hairline color.border.default color.border.error color.status.danger color.surface.default color.surface.sunken color.text.default color.text.disabled color.text.muted color.text.placeholder duration.fast easing.standard focus.ring-color focus.ring-offset focus.ring-width font.family.default form.background form.border radius.control size.1 size.2 size.3 text.md text.sm weight.semibold