Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA searchable select wired as a proper form field: visible label, hint, required marking, and an error that appears after the list closes empty or on submit, linked with aria-describedby and cleared as soon as a value is chosen. Use this when a combobox sits in a form that validates.
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 sign-up, checkout and settings forms, where a required choice must be reachable by label, explain itself and report a missing value the same way a text input does.
Do not use it when the form library already renders labels and errors for you. Use only the picker.
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 |
| --------------- | ------------------------- | --------- | -------------------------------------------------------------------------------------- | --------------------------------------- |
| label | string | - | Visible label. |
| description | string | - | Hint under the label. |
| options | { value, label }[] | - | The choices. |
| value | string | - | Selected value (controlled). |
| defaultValue | string | "" | Initial value. |
| onValueChange | (value: string) => void | - | Runs when a value is chosen. |
| required | boolean | false | Marks the field required and validates it. |
| error | string | - | An error from outside (for example a server); overrides the built-in required message. |
| name | string | - | Submits the value with a form. |
| validateOn | "blur" \\ | "submit" | blur | When a missing value is first reported. |
label for), so clicking it focuses the field and the name is the label text.aria-required when required and aria-invalid plus aria-describedby (hint and error) when invalid.validateOn="blur" a missing value is reported when the list closes empty, and from then on as the person edits; on submit the browser's own constraint validation blocks the form (through a visually hidden required proxy input) and the real trigger is focused.role="alert" and its text does not change while it is shown, so it is announced once, not on every keystroke.The pattern ships with a Testing Library test (select-field-label-error-validation.test.tsx) that covers label wiring, the error after closing empty, clearing on a choice, submit validation with focus and an external error.