# 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.

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

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

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### Pre-selected tags

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

```tsx
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}
/>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| onChange | (value: TokenizerOption[]) => void | yes |  | Called with the next token array when a token is added or removed. |
| options | TokenizerOption[] | yes |  | Full candidate list; options already present in `value` are excluded from the dropdown. |
| value | TokenizerOption[] | yes |  | Selected tokens (controlled). |
| className | string \| undefined | no |  |  |
| description | string \| undefined | no |  | Helper text shown below the group when there is no error. |
| errorMessage | string \| undefined | no |  | Validation message; when set, the field is shown in an error state. |
| isDisabled | boolean \| undefined | no |  |  |
| label | string \| undefined | no |  | Field label rendered above the group. |
| placeholder | string \| undefined | no | Add… | Placeholder text shown in the search input when no tokens are selected. |

## 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.