Multi-Select Token Pills

Add a tag and it pops in; remove one and the gap closes cleanly.

Loading preview...

Props

PropTypeDefaultDescription
valueTokenPill[]-Controlled tokens.
defaultValueTokenPill[]-Default tokens for uncontrolled usage.
onChange(next: TokenPill[]) => void-Fired on every add or remove.
placeholderstring"Add a tag…"Placeholder for the input.
validate(raw: string) => { invalid?: boolean } | void-Validate a freshly typed token before it is committed.
delimitersRegExp/[,;\s]+/Characters that commit the current input as a token.
maxnumber-Maximum number of tokens. Adding past this is a no-op.
labelstring-Optional label rendered above the field.
disabledbooleanfalseDisable the entire control.