Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA select that creates a missing option optimistically: it appears selected and marked Saving at once, becomes real when the server answers, and is rolled back with a message and Retry if the request fails. Use this when creating a record is a normal part of choosing one.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for fields such as company, project or category on a form, where a person often types a value that does not exist yet and should not wait for the network before going on.
Do not use it when creating has side effects people must confirm, such as billing. Use a dialog.
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 \\ | null) => void | - | Runs when the selection changes, including to the temporary id. |
| onCreate | (name: string) => Promise<{ id, name }> | - | Saves the new option. Reject to roll back. |
| onCreated | (option) => void | - | Runs with the saved option, whose id replaces the temporary one. |
Saving… as text beside the name.Saved <name>; on failure it reads Could not save <name>, the selection returns to what it was, and a Retry button appears.onCreated runs only on success.The pattern ships with a Testing Library test (async-optimistic-create.test.tsx) that covers the optimistic selection, success replacing the temporary id and failure rolling back with Retry.