# Autocomplete: Creatable options

> Let people add a missing option from the slotsmith Autocomplete's search: the create row, onCreate, and a pending create.

With `creatable`, a search in the Autocomplete that matches nothing offers a create row instead of "No results". Picking it calls your `onCreate` with the typed text; you add the new option to `options` and select it.

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

export default function Creatable() {
  const [options, setOptions] = useState<Topic[]>(topics.filter((topic) => !topic.archived));
  const [tag, setTag] = useState<OptionValue | null>(null);

  return (
    <div style={{ display: "grid", gap: "1rem", maxWidth: 360 }}>
      <Autocomplete
        options={options}
        value={tag}
        onChange={setTag}
        // A search that matches nothing offers a "Create" row; Enter or a click calls onCreate with the text.
        creatable
        onCreate={(name) => {
          const created = { id: name.toLowerCase().replace(/\s+/g, "-"), label: name };
          setOptions((all) => [created, ...all]);
          setTag(created.id);
        }}
        aria-label="Tag"
      />
      <p>{tag === null ? "Nothing selected." : `Selected: ${tag}`}</p>
    </div>
  );
}
```

Type a topic that is not in the list, such as "Zebra", then press <kbd>Enter</kbd> or click the create row.

## When the row shows

The create row is offered only once the search has settled on nothing: the search box has text, no option matches, and nothing is loading, failed or held back by [`minChars`](https://slotsmith.dev/components/autocomplete/api/#prop-minChars). While results may still arrive, it waits, so a record that was about to appear is not created twice.

<kbd>Enter</kbd> with no option highlighted creates, like a click on the row. The row's text is the [`create`](https://slotsmith.dev/components/autocomplete/api/#label-create) label, "Create “Zebra”".

## onCreate

[`onCreate`](https://slotsmith.dev/components/autocomplete/api/#prop-onCreate) receives the trimmed search text. The autocomplete does not add anything itself: you create the record, add it to `options` and set the value, as the demo does. A selected value stays labelled while the search changes.

When creating takes a request, pass [`createLoading`](https://slotsmith.dev/components/autocomplete/api/#prop-createLoading) while it runs: the row is disabled and shows the [`creating`](https://slotsmith.dev/components/autocomplete/api/#label-creating) label. The [`Create`](https://slotsmith.dev/components/autocomplete/api/#slot-Create) slot replaces the row.