RadioGroupField

Description

A radio button group field component that allows users to select one option from a list. Integrates with React Hook Form using Controller for better control handling.

Import

import { RadioGroupField } from '@components/common/form/RadioGroupField';

Usage

import { Form } from '@components/common/form/Form';
import { RadioGroupField } from '@components/common/form/RadioGroupField';

function ShippingForm() {
  const shippingOptions = [
    { value: 'standard', label: 'Standard Shipping - Free' },
    { value: 'express', label: 'Express Shipping - $10' },
    { value: 'overnight', label: 'Overnight Shipping - $25' }
  ];

  return (
    <Form action="/api/shipping">
      <RadioGroupField
        name="shippingMethod"
        label="Shipping Method"
        options={shippingOptions}
        required
      />
    </Form>
  );
}

Props

Name	Type	Default	Description
name	FieldPath<T>	-	Field name (required)
options	RadioOption[]	-	Array of radio option objects (required)
label	string	-	Label text for the radio group
direction	'horizontal' | 'vertical'	'vertical'	Layout direction of radio buttons
defaultValue	string | number	-	Default selected value
required	boolean	false	Makes the field required
disabled	boolean	false	Disables all radio buttons
error	string	-	Custom error message
helperText	string	-	Helper text shown in a tooltip
validation	RegisterOptions<T>	-	React Hook Form validation rules
wrapperClassName	string	-	CSS class for the wrapper div
...props	InputHTMLAttributes	-	All standard HTML input attributes

RadioOption Type

interface RadioOption {
  value: string | number;
  label: string;
  disabled?: boolean;
}

Example: Payment Method

import { Form } from '@components/common/form/Form';
import { RadioGroupField } from '@components/common/form/RadioGroupField';

function PaymentForm() {
  const paymentMethods = [
    { value: 'credit', label: 'Credit Card' },
    { value: 'paypal', label: 'PayPal' },
    { value: 'bank', label: 'Bank Transfer' }
  ];

  return (
    <Form action="/api/payment">
      <RadioGroupField
        name="paymentMethod"
        label="Payment Method"
        options={paymentMethods}
        direction="vertical"
        required
      />
    </Form>
  );
}

Example: Horizontal Layout

import { Form } from '@components/common/form/Form';
import { RadioGroupField } from '@components/common/form/RadioGroupField';

function GenderForm() {
  const genderOptions = [
    { value: 'male', label: 'Male' },
    { value: 'female', label: 'Female' },
    { value: 'other', label: 'Other' }
  ];

  return (
    <Form action="/api/profile">
      <RadioGroupField
        name="gender"
        label="Gender"
        options={genderOptions}
        direction="horizontal"
      />
    </Form>
  );
}

Example: With Disabled Options

import { Form } from '@components/common/form/Form';
import { RadioGroupField } from '@components/common/form/RadioGroupField';

function PlanForm() {
  const plans = [
    { value: 'basic', label: 'Basic Plan - $9/mo' },
    { value: 'pro', label: 'Pro Plan - $29/mo' },
    { value: 'enterprise', label: 'Enterprise Plan - Contact Sales', disabled: true }
  ];

  return (
    <Form action="/api/plans">
      <RadioGroupField
        name="plan"
        label="Select Your Plan"
        options={plans}
        defaultValue="basic"
        required
      />
    </Form>
  );
}

Features

• Single Selection: Only one option can be selected at a time
• Horizontal/Vertical Layout: Control layout direction
• Disabled Options: Mark specific options as disabled
• Controller Integration: Uses React Hook Form Controller for better control
• TypeScript Support: Full type safety with generics

Notes

• Uses fieldset and legend for proper accessibility
• Individual options can be disabled while keeping others enabled
• The direction prop controls CSS class for layout

Related Components

• Form - Parent form component
• SelectField - Dropdown selection
• CheckboxField - Multiple selection with checkboxes
• ToggleField - Switch toggle