shuip

Radio Field

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

Installation

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

Preview

This is a description

Less verbose code in forms

<FormField
control={form.control}
name="theme"
render={({ field }) => (
  <FormItem className="space-y-3">
    <FormLabel>Select a theme</FormLabel>
    <FormControl>
      <RadioGroup
        onValueChange={field.onChange}
        defaultValue={field.value}
        className="flex flex-col space-y-1"
      >
        <FormItem className="flex items-center space-x-3 space-y-0">
          <FormControl>
            <RadioGroupItem value="light" />
          </FormControl>
          <FormLabel className="font-normal">Light</FormLabel>
        </FormItem>
        <FormItem className="flex items-center space-x-3 space-y-0">
          <FormControl>
            <RadioGroupItem value="dark" />
          </FormControl>
          <FormLabel className="font-normal">Dark</FormLabel>
        </FormItem>
        <FormItem className="flex items-center space-x-3 space-y-0">
          <FormControl>
            <RadioGroupItem value="system" />
          </FormControl>
          <FormLabel className="font-normal">System</FormLabel>
        </FormItem>
      </RadioGroup>
    </FormControl>
    <FormMessage />
  </FormItem>
)}
/>

With RadioField, the same result in a single line:

<RadioField 
    register={form.register('theme')} 
    label="Select a theme" 
    options={['light', 'dark', 'system' ]}
/>

Built-in features

  • Automatic radio rendering: Pass an array of options and they're rendered as radio buttons
  • Clean layout: Pre-configured spacing and alignment for radio groups
  • Zod validation: Native integration with react-hook-form and Zod
  • Responsive design: Optimized for both desktop and mobile
  • Error display: Automatic error message display

react-hook-form integration

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

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


<RadioField 
    register={form.register('plan')} 
    label="Choose your plan" 
    options={{ Basic: 'basic', Pro: 'pro', Enterprise: 'enterprise' }}
/>

Examples

Default

This is a description

Props

NameTypeDescription
registerUseFormRegisterReturnreact-hook-form register function result
optionsstring[]Array of options to render as radio buttons
labelstring?Label displayed above the radio group
descriptionstring?Optional description below the field
...propsRadioGroupPropsAll shadcn/ui RadioGroup props