Halloween only 🎃 Get Wensity Pro for 31% less with
Wensity

Multi-Select Tag Input

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 Tag Input component preview

Overview

Multi-Select Tag Input is a React and Tailwind CSS tag and token input for emails, skills, or labels, in Next.js or any React app, animated with Framer Motion. Comma, semicolon, space, Enter, and Tab turn text into a pill, pasting a list adds them all in one staggered wave, and duplicates are skipped regardless of case. Removed pills slide out while neighbors glide over, and Backspace in an empty field removes the last one. validate flags bad entries in red, and max caps the count. Spaces also split tags, so pass your own delimiters for multi word tags.

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.

Related components

  • macOS Floating Dock component preview

    macOS Floating Dock

    A magnetic dock where icons inflate near the cursor and push their siblings aside.

  • Shimmering Skeleton Wrapper component preview

    Shimmering Skeleton Wrapper

    One angled GPU sweep that travels across any placeholder geometry you wrap, never a separate shimmer stuttering per row.

  • Cool Button component preview

    Cool Button

    A dual-layer orbit glow that soft-spins around the edge of any button or link you wrap it around, at zero layout cost.

  • File Uploader component preview

    File Uploader

    A bold red dropzone for any file, with gallery tiles and progress after upload.