Wensity

Multi-Select Token Pills

A tag input where pills pop in as you add them and slide out on remove, closing the gap without snapping the layout.

elite micro interactionsmultiselecttokenpillsframer motion
Multi-Select Token Pills component preview

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add multi-select-token-pills

Usage

Import MultiSelectTokenPills from @/components/wensity/multi-select-token-pills and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { MultiSelectTokenPills, type TokenPill } from "@/components/wensity/multi-select-token-pills";


const seed: TokenPill[] = [
  { id: "1", label: "framer-motion" },
  { id: "2", label: "tailwindcss" },
];


export default function Example() {
  return (
    <MultiSelectTokenPills
      label="Tags"
      defaultValue={seed}
      placeholder="Add a tag. Try pasting comma-separated values"
      validate={(v) => ({ invalid: v.length < 2 })}
      onChange={(next) => console.log(next)}
    />
  );
}

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.