Hero Hook Form API / SelectFieldProps

Type Alias: SelectFieldProps<TFieldValues, TValue>

SelectFieldProps<TFieldValues, TValue> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & object

Defined in: fields/SelectField.tsx:59

Props for the SelectField component.

Type Declaration

options

options: readonly SelectOption<TValue>[]

Array of select options

placeholder?

optional placeholder: string

Placeholder text when no option is selected

selectProps?

optional selectProps: Omit<React.ComponentProps<typeof Select>, "selectedKeys" | "onSelectionChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled">

Additional props to pass to the underlying Select component

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)

Example


import { SelectField } from "@rachelallyson/hero-hook-form";
import { useForm } from "react-hook-form";
 
const form = useForm({
  defaultValues: { country: "" },
});
 
const options = [
  { label: "United States", value: "us" },
  { label: "Canada", value: "ca" },
  { label: "Mexico", value: "mx" },
];
 
<SelectField
  control={form.control}
  name="country"
  label="Country"
  options={options}
  placeholder="Select a country"
/>