Tokenizer

Combo-style field that turns selected options into removable tags. Always controlled via value / onChange — pass the full option objects, not just ids. Selected ids are filtered out of the dropdown so you cannot add the same token twice.

Examples

Default

Pass options as { id, label }[] and keep selected tokens in React state. Type to filter, pick from the list, or press Backspace on an empty input to remove the last tag.

import { Tokenizer } from '@var-ui/react';

<Tokenizer label="Tags" options={options} value={value} onChange={setValue} />

Pre-selected tags

Seed value with one or more options to show an existing selection. Pair with description or errorMessage for field chrome.

import { Tokenizer } from '@var-ui/react';
import { useState } from 'react';

const options = [
  { id: 'alpha', label: 'Alpha' },
  { id: 'beta', label: 'Beta' },
  { id: 'gamma', label: 'Gamma' },
  { id: 'delta', label: 'Delta' },
];

const [value, setValue] = useState([options[0], options[2]]);

<Tokenizer
  label="Tags"
  description="Start with a few tokens already selected"
  options={options}
  value={value}
  onChange={setValue}
/>

Props

Accessibility

Built on React Aria ComboBox plus TagGroup / TagList. The group exposes a labeled remove control on each chip (Remove {label}). Keep label visible so the field and the selected-tag list share a clear accessible name; use description / errorMessage for the same helper and validation copy sighted users see. Keyboard: arrow through suggestions, Enter to add, Backspace on an empty input removes the last token.