# Autocomplete: Multiple values

> Pick several values with the slotsmith Autocomplete: tags in the trigger, Backspace to remove the last one, and an overflow count.

With `multiple`, the Autocomplete keeps several values: `value` is an array of ids, each selected option shows as a tag in the trigger, and the popup stays open as you pick, so you can choose several in a row.

```tsx
import { useState } from "react";
import { Autocomplete, type OptionValue } from "slotsmith/autocomplete";
import { topics } from "../shared/options";

export default function Multiple() {
  const [topicIds, setTopicIds] = useState<OptionValue[]>(["accessibility", "forms"]);

  return (
    <div style={{ display: "grid", gap: "1rem", maxWidth: 360 }}>
      <Autocomplete
        // `multiple` makes value an array and keeps the popup open on each pick.
        multiple
        options={topics}
        optionDisabled={(topic) => !!topic.archived}
        value={topicIds}
        onChange={setTopicIds}
        // Three tags show; the rest collapse into "+N".
        maxTags={3}
        aria-label="Topics"
      />
      <p>{topicIds.length === 0 ? "Nothing selected." : `Selected: ${topicIds.join(", ")}`}</p>
    </div>
  );
}
```

Open the picker and press <kbd>Backspace</kbd> with the search box empty: the last tag goes. Clicking a selected option again removes it too.

## Value and onChange

[`multiple`](https://slotsmith.dev/components/autocomplete/api/#prop-multiple) changes the type of the selection props, so neither mode can be given the other's shape. In single mode, `value` is an id or `null` and `onChange` receives `(id, option)`. In multiple mode, `value` is an array of ids and `onChange` receives `(ids, options)`, the options in the same order as the ids. An option is `undefined` only for an id no option has been seen for; [`selected`](https://slotsmith.dev/components/autocomplete/api/#prop-selected) supplies those.

## Tags

- [`maxTags`](https://slotsmith.dev/components/autocomplete/api/#prop-maxTags) sets how many tags show (2 by default); the rest collapse into a count read from the [`more`](https://slotsmith.dev/components/autocomplete/api/#label-more) label, "+2". The demo shows three.
- Each tag has a remove button named by the [`remove`](https://slotsmith.dev/components/autocomplete/api/#label-remove) label, "Remove Forms". The [`Tag`](https://slotsmith.dev/components/autocomplete/api/#slot-Tag) slot replaces the whole tag.
- The clear button removes every value at once.

## Picking and removing from the keyboard

- <kbd>Enter</kbd> on a highlighted option adds it, or removes it if it is already selected. The popup stays open; set [`closeOnSelect`](https://slotsmith.dev/components/autocomplete/api/#prop-closeOnSelect) to close it after each pick.
- <kbd>Backspace</kbd> in the empty search box removes the last tag. With text in the search box it deletes text as usual.
- The listbox has `aria-multiselectable="true"`, and each option's `aria-selected` follows the selection.

## Disabled options

[`optionDisabled`](https://slotsmith.dev/components/autocomplete/api/#prop-optionDisabled) marks options that stay visible but cannot be picked, like the archived topic in the demo. They get `aria-disabled="true"`, the arrow keys skip them, and a click does nothing.