Function: RadioGroupField()

RadioGroupField<TFieldValues, TValue>(props): Element

Defined in: fields/RadioGroupField.tsx:131

A radio group field component that integrates React Hook Form with HeroUI RadioGroup.

This component provides a type-safe radio group field with validation support, error handling, and accessibility features. Only one option can be selected at a time.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

TValue

TValue extends string | number = string

The value type for the radio group (string or number)

Parameters

props

RadioGroupFieldProps<TFieldValues, TValue>

The radio group field props

Returns

Element

The rendered radio group field component

Examples


import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { z } from "zod";
 
const schema = z.object({
  plan: z.enum(["basic", "pro", "enterprise"], {
    required_error: "Please select a plan",
  }),
});
 
const options = [
  { label: "Basic - $9/month", value: "basic" },
  { label: "Pro - $29/month", value: "pro" },
  { label: "Enterprise - $99/month", value: "enterprise" },
];
 
function MyForm() {
  return (
    <ZodForm
      config={{
        schema,
        fields: [
          FormFieldHelpers.radioGroup("plan", "Select Plan", options),
        ],
      }}
      onSubmit={(data) => console.log(data)}
    />
  );
}


// With custom styling
<RadioGroupField
  control={form.control}
  name="plan"
  label="Select Plan"
  options={options}
  radioGroupProps={{
    orientation: "horizontal",
    color: "primary",
  }}
/>