shuip

Radio Field

Radio button group component integrated with React Hook Form for single-choice selections with automatic option rendering.

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

Preview

Loading...

Radio buttons are used for single-choice selections from a predefined set of options. RadioField automatically renders radio button options from an array, handling all the form integration and layout concerns.

The component eliminates the need to manually create individual radio items and their labels. It provides consistent spacing, proper accessibility attributes, and automatic form state management for radio groups.

Built-in features

  • Automatic option rendering: Pass an array of strings and get fully functional radio buttons
  • Consistent layout: Pre-configured spacing and alignment for radio groups
  • Accessibility support: Proper ARIA attributes and keyboard navigation
  • Zod validation: Native integration with react-hook-form and Zod schemas
  • Error display: Automatic validation error messages

Less boilerplate

<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, this reduces to a single declarative component:

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

Examples

Conditional Pricing

Loading...

Default

Loading...

Payment Method

Loading...

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