Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA required select with label, hint and error wired together: the error appears after a close without choosing or after submit, and is linked with aria-describedby and aria-invalid.
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 this for required choices in forms: plan, country, reason. Pass showErrors after a failed submit and error for server messages.
Do not show the error on first render, and do not rely on the red text alone: the message is the signal.
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. |
options | { value, label }[] | - | Choices. |
value / onValueChange | string / fn | - | Controlled value. |
requiredMessage | string | Choose an option. | Empty-field message. |
hint, error | string | - | Help text and a server error. |
showErrors | boolean | false | Show errors even if untouched. |
name | string | - | Form field name. |
aria-hidden); aria-required on the trigger carries it to assistive technology.role="alert" message listed after the hint in aria-describedby; aria-invalid is set with it.| Key | Action |
|---|---|
| Enter or Space | opens the list |
| Escape | closes (and marks the field as touched) |
The pattern ships a Testing Library test (select-field-error.test.tsx) that covers the description and required state, submit errors, touched errors and clearing on choice.