npx shadcn@latest add https://shuip.plvo.dev/r/rhf-select-field.json

Preview

Select dropdowns provide single-choice selection from a list of options with labels and values. SelectField automatically renders select options from a key-value object, where keys become display labels and values become form data.

The component handles the complexity of connecting Radix UI's Select with React Hook Form, including proper value binding, change handlers, and validation state management.

Built-in features

• Automatic option rendering: Pass a key-value object and get a fully functional select dropdown
• Label-value mapping: Keys display to users, values are stored in form data
• Placeholder support: Optional placeholder text for unselected state
• Zod validation: Native integration with react-hook-form and Zod schemas
• Accessibility support: Full keyboard navigation and screen reader compatibility

Less boilerplate

<FormField
control={form.control}
name="country"
render={({ field }) => (
  <FormItem>
    <FormLabel>Country</FormLabel>
    <Select onValueChange={field.onChange} defaultValue={field.value}>
      <FormControl>
        <SelectTrigger>
          <SelectValue placeholder="Select a country" />
        </SelectTrigger>
      </FormControl>
      <SelectContent>
        <SelectItem value="us">United States</SelectItem>
        <SelectItem value="ca">Canada</SelectItem>
        <SelectItem value="fr">France</SelectItem>
      </SelectContent>
    </Select>
    <FormDescription>
      Choose your country
    </FormDescription>
    <FormMessage />
  </FormItem>
)}
/>

With SelectField, this reduces to a single declarative component:

<SelectField 
register={form.register('country')} 
label="Country" 
placeholder="Select a country"
description="Choose your country"
options={{ 'United States': 'us', 'Canada': 'ca', 'France': 'fr' }}
/>

Examples

Props