Forms

Tag input

Add and remove short values as chips: skills, keywords, highlights.

import { TagInput } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Skills

Press Enter or comma to add. Paste a comma-separated list to add several.

TypeScriptReactPostgreSQL

Show code

tag-input/skills.tsx

'use client';

import { Field, TagInput } from '@jsonresume/ui';
import { useState } from 'react';
import * as styles from './skills.css';

export default function TagInputSkills() {
  const [skills, setSkills] = useState(['TypeScript', 'React', 'PostgreSQL']);
  return (
    <Field
      label="Skills"
      hint="Press Enter or comma to add. Paste a comma-separated list to add several."
      className={styles.root}
    >
      <TagInput
        value={skills}
        onValueChange={setSkills}
        placeholder="Add a skill"
        maxTags={12}
      />
    </Field>
  );
}

tag-input/skills.css.ts

import { style } from '@vanilla-extract/css';

export const root = style({ width: 'min(100%, 30rem)' });

Accessibility

Enter or comma adds; Backspace on an empty field removes the last tag.
Every tag has a labelled remove button; works inside Field.

Props

Also accepts the attributes of the element TagInput renders.
Prop	Type	Default	Description
defaultValue	string[]	[]
maxTags	number	–
onValueChange	((tags: string[]) => void)	–
separators	string[]	['Enter', ',']	Keys that commit the typed text as a tag.
value	string[]	–