Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA searchable select wired to React Hook Form: it registers through useController, reports blur when the list closes, shows the field's error as a linked alert and receives focus when validation fails. Use this when your forms already use React Hook 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 in forms built with React Hook Form, where a picker has to take part in register-style validation, dirty state and focus-on-error like any native input.
Do not use it when you use another form library, or no library. Use the label and validation field.
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 |
|---|---|---|---|
control | Control<T> | - | From useForm(). |
name | Path<T> | - | The field name. |
label | string | - | Visible label. |
options | { value, label }[] | - | The choices. |
rules | RegisterOptions | - | Validation rules, e.g. { required: "Pick a country" }. |
description | string | - | Hint under the label. |
field.ref, so React Hook Form's focus-on-error moves keyboard focus to it.fieldState.error.message is shown in a role="alert" paragraph and referenced by aria-describedby; aria-invalid is set while there is an error.field.onBlur, which marks the field touched so mode: "onBlur" validation runs.value.The pattern ships with a Testing Library test (select-field-react-hook-form.test.tsx) that covers choosing updating the form value, the required error after submit with focus and clearing the error on a choice.