Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA form using a React 19 action with a searchable select: the choice is submitted as form data, the pending state disables the button, field errors returned by the action are shown beside the select and the selection survives a failed submit. Use this when a form posts to a server action.
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 in Next.js and other React 19 apps that submit with <form action>, where the action returns field errors and the picker must keep its value after a failed attempt.
Do not use it when the form submits with fetch from an event handler. Use the React Hook Form or label-and-validation patterns.
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 |
|---|---|---|---|
action | (prev: State, formData: FormData) => Promise<State> | - | The form action. Return { error } for the field, { message } for success. |
name | string | - | The field name in the submitted form data. |
label | string | - | Visible label. |
options | { value, label }[] | - | The choices. |
defaultValue | string | "" | Initial value. |
submitLabel | string | Save | Submit button text. |
Saving…; a polite status announces Saving…, then the returned message.state.error is shown in a role="alert" paragraph linked to the trigger with aria-describedby, and aria-invalid is set.The pattern ships with a Testing Library test (select-field-server-action-form.test.tsx) that covers submitting the chosen value, an error from the action keeping the selection, pending and a success message.