shuip

Select Field

A select form field designed to be used with react-hook-form and Zod for validation. It combines a label, select dropdown, error handling, and optional description into a single reusable component.

Installation

npx shadcn@latest add https://shuip.xyz/r/select-field.json

Preview

Less verbose code in forms

<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, the same result in a single line:

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

react-hook-form integration

The component is specifically designed for react-hook-form:

const form = useForm({
    defaultValues: { category: '' },
    resolver: zodResolver(schema),
});


const options = {
    'Technology': 'tech',
    'Design': 'design', 
    'Business': 'business',
};


// Direct usage with form register
<SelectField 
    register={form.register('category')} 
    label="Category" 
    options={options}
/>

Examples

Default

Props

NameTypeDescription
registerUseFormRegisterReturnreact-hook-form register function result
optionsRecord<string, string>Object where keys are labels and values are form values
labelstring?Label displayed above the field
placeholderstring?Placeholder text in the select
descriptionstring?Optional description below the field
defaultValueTFieldValues[FieldPath<TFieldValues>]?Default selected value
...propsSelectPropsAll Radix Select props