Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA select whose footer turns into a small form for adding a new option, with name validation, duplicate checks and a created option that is selected at once. Use this when a missing option should be added without leaving the form.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for workspaces, projects, labels and teams, where people regularly need one that does not exist yet and a dialog for it would be heavy.
Do not use it when creating needs more than a name. Open a dialog for the full form.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
| --------------- | ---------------------------- | ---------------- | ----------------------------------------- | ------------------------- |
| options | { id, name }[] | - | Existing options. |
| value | string \\ | null | - | Selected id (controlled). |
| defaultValue | string \\ | null | null | Initial id. |
| onValueChange | (id: string) => void | - | Runs when an option is chosen or created. |
| onCreate | (name: string) => Option \\ | Promise<Option> | local id | Makes the option. |
| createLabel | string | New workspace | Footer row and form label. |
| maxLength | number | 40 | Longest name. |
aria-describedby, set aria-invalid and are announced politely.Created <name>.The pattern ships with a Testing Library test (select-with-inline-create-footer.test.tsx) that covers opening the form, validation, creating and selecting and Escape returning to the list.