Tag-Eingabe
Freie Schlagwort-Eingabe: Enter/Komma legt einen Chip an, Backspace im leeren Feld entfernt den letzten, optionale Vorschlagsliste — emittiert tags
Nutzt: ui.chip
Beispiele
Schlagwörter: Enter/Komma legt an, Backspace entfernt, Vorschläge klickbar
Schlagwörter
DessousNeuheit
Vorschläge:
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| label | string | "" | Label |
| placeholder | string | "Schlagwort eingeben …" | Platzhalter |
| tags | array | [] | Vorbelegte Tags |
| suggestions | array | [] | Vorschläge (Klick fügt hinzu) |
| max | number | 0 | Maximum (0 = unbegrenzt) |
* Pflicht-Prop
Events & Slots
Events:
⚡ tags — 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 |
|---|---|
--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.hairlinecolor.border.defaultcolor.border.strongcolor.surface.sunkencolor.text.defaultcolor.text.mutedfont.family.defaultform.backgroundform.borderform.border-focusform.placeholderradius.controlradius.fullsize.05size.1size.10size.2size.24size.3text.mdtext.smtext.xsweight.medium
LLM-Notizen
component.tag-input
Freie Schlagwort-Eingabe mit Chips. Für feste Auswahllisten stattdessen component.multi-select.
Wichtige Props
tags(Vorbelegung),suggestions(Klick fügt hinzu),max(0 = unbegrenzt),label,placeholder.
Beispiel-Node
{"definition": "component.tag-input", "props": {"label": "Schlagwörter", "tags": ["Sale"], "suggestions": ["Neu", "Limitiert"]}}
Hinweise
- Enter oder Komma legt an, Backspace im leeren Feld entfernt den letzten Chip, Duplikate werden ignoriert.
- Emittiert
tagsmit{values: [...]}bei jeder Änderung.