Token field

Turns typed entries into tokens that you can edit and remove.

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-token-field.json

Composition

TokenField
Owns the value and editing state.
- TokenFieldLabel
- TokenFieldInput
- TokenFieldDescription

TagFieldValue Splits text into tags at each comma or line break. Pass an instance to the value prop.

Disabled

Project tags

Commit the draft with onSubmit. Uncommitted text is not a token.

Project tags

​Design​​Review​

Type a tag, then press comma or Enter. Press Backspace to remove a tag.

2 tags added

token-field-demo.tsx

"use client";import { useState } from "react";import {  TagFieldValue,  TokenField,  TokenFieldDescription,  TokenFieldInput,  TokenFieldLabel,} from "@/components/vip-ui/token-field";export function TokenFieldDemo() {  const [value, setValue] = useState(    () =>      new TagFieldValue([        { type: "token", text: "Design" },        { type: "token", text: "Review" },      ]),  );  const tags = value.segments.filter((segment) => segment.type === "token");  return (    <div className="grid w-full max-w-sm gap-3">      <TokenField        allowsNewlines        value={value}        onChange={setValue}        onSubmit={() => setValue(value.commit())}      >        <TokenFieldLabel>Project tags</TokenFieldLabel>        <TokenFieldInput placeholder="Add a tag" />        <TokenFieldDescription>          Type a tag, then press comma or Enter. Press Backspace to remove a          tag.        </TokenFieldDescription>      </TokenField>      <p className="text-xs text-muted-foreground" aria-live="polite">        {tags.length} {tags.length === 1 ? "tag" : "tags"} added      </p>    </div>  );}

Sizes

​Design​​Research​

​Design​​Research​

​Design​​Research​

​Design​​Research​

token-field-sizes-demo.tsx

"use client";import { useState } from "react";import type { Size } from "@/components/vip-ui/size";import { TagFieldValue, TokenField } from "@/components/vip-ui/token-field";export function TokenFieldSizesDemo() {  return (    <div className="grid w-full max-w-sm gap-3">      <ProjectTags size="sm" />      <ProjectTags size="md" />      <ProjectTags />      <ProjectTags size="xl" />    </div>  );}function ProjectTags({ size }: { size?: Size }) {  const [value, setValue] = useState(    () =>      new TagFieldValue([        { type: "token", text: "Design" },        { type: "token", text: "Research" },      ]),  );  return (    <TokenField      size={size}      aria-label="Tags"      placeholder="Add a tag"      value={value}      onChange={setValue}      onSubmit={() => setValue(value.commit())}    />  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria TokenField (opens in a new tab).

size: "xs" | "sm" | "md" | "lg" | "xl" = "lg": Sets the size of the input box. Tokens keep one size.
label: string: Label above the field in the default layout. Without it, pass aria-label.
description: string: Help text below the field in the default layout.
placeholder: string: Input placeholder in the default layout.