Hero Hook Form API / SelectField

Function: SelectField()

SelectField<TFieldValues, TValue>(props): Element

Defined in: fields/SelectField.tsx:136

A select dropdown field component that integrates React Hook Form with HeroUI Select.

This component provides a type-safe select field with validation support, error handling, and accessibility features.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

TValue

TValue extends string | number = string

The value type for the select field (string or number)

Parameters

props

SelectFieldProps<TFieldValues, TValue>

The select field props

Returns

Element

The rendered select field component

Examples


import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { z } from "zod";
 
const schema = z.object({
  country: z.string().min(1, "Please select a country"),
});
 
const options = [
  { label: "United States", value: "us" },
  { label: "Canada", value: "ca" },
];
 
function MyForm() {
  return (
    <ZodForm
      config={{
        schema,
        fields: [
          FormFieldHelpers.select("country", "Country", options, "Select a country"),
        ],
      }}
      onSubmit={(data) => console.log(data)}
    />
  );
}


// With custom styling
<SelectField
  control={form.control}
  name="country"
  label="Country"
  options={options}
  selectProps={{
    variant: "bordered",
    size: "lg",
  }}
/>