Tag-Eingabe — component.tag-input
Freie Schlagwort-Eingabe: Enter/Komma legt einen Chip an, Backspace im leeren Feld entfernt den letzten, optionale Vorschlagsliste — emittiert tags
Componentv1.0.0Formulareweb.documentweb.applicationdesktop.shellbuilder.preview
Beispiele
Schlagwörter: Enter/Komma legt an, Backspace entfernt, Vorschläge klickbar
Schlagwörter
DessousNeuheit
Vorschläge:
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
label | string | "" |
placeholder | string | "Schlagwort eingeben …" |
tags | array | [] |
suggestions | array | [] |
max | number | 0 |
Events & Slots
Events: tags
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--tag-input-border-default | var(--color-border-default) |
--tag-input-border-strong | var(--color-border-strong) |
--tag-input-form-background | var(--form-background) |
--tag-input-form-border | var(--form-border) |
--tag-input-form-border-focus | var(--form-border-focus) |
--tag-input-form-placeholder | var(--form-placeholder) |
--tag-input-radius-control | var(--radius-control) |
--tag-input-radius-full | var(--radius-full) |
--tag-input-surface-sunken | var(--color-surface-sunken) |
--tag-input-text-default | var(--color-text-default) |
--tag-input-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
border.hairline color.border.default color.border.strong color.surface.sunken color.text.default color.text.muted font.family.default form.background form.border form.border-focus form.placeholder radius.control radius.full size.05 size.1 size.10 size.2 size.24 size.3 text.md text.sm text.xs weight.medium