TagInput

Entfernbare Tags in einem Feld: Enter, Komma und Einfügen trennen sie; die Rücktaste entfernt das letzte.

Invite members

lin@northwind.exampletomas@northwind.example

import { TagInput } from "@logicplanes/kaeso-ui";

Props

aria-label
string
Der zugängliche Name, wenn es keine sichtbare Beschriftung gibt.
defaultValue
string[]
Die Tags beim ersten Rendern.
description
ReactNode
Ein Satz Hilfe unter der Beschriftung.
disabled
boolean
Schaltet es aus: Es lässt sich nicht verwenden und wirkt abgeblendet.
id
string
Die ID des Steuerelements, damit eine Beschriftung an anderer Stelle darauf verweisen kann.
label
ReactNode
Die sichtbare Beschriftung.
layout
"horizontal" | "vertical"
Die Beschriftung über dem Steuerelement (vertical) oder daneben (horizontal).
name
string
Der Feldname, unter dem der Wert mit einem Formular gesendet wird.
onValueChange
((value: string[]) => void)
Wird mit den Tags aufgerufen, sobald einer hinzugefügt oder entfernt wird.
optional
boolean
Ergänzt die Beschriftung um „Optional“, für Formulare, in denen die meisten Felder Pflicht sind.
placeholder
string
Text, der angezeigt wird, solange es keinen Wert gibt.
required
boolean
Markiert es in einem Formular als Pflichtfeld.
separators
string[]
Zeichen, die ein Tag beenden, außer Enter.
validate
((tag: string) => string | true)
Gib true für ein gültiges Tag zurück oder eine Meldung, was falsch ist. Ungültige Tags bleiben, mit einem Gefahrenring markiert, und zeigen die Meldung als Tooltip (und für Screenreader); Fehler stehen nie unter dem Feld, zeige sie also beim Absenden auch als Toast.
value
string[]
Die Tags, bei gesteuertem Wert.