Skip to main content

RadioGroup

The RadioGroup component allows users to select exactly one option from a set.

Usage

<RadioGroup 
  name="plan" 
  options={[
    { label: "Basic", value: "basic" },
    { label: "Pro", value: "pro" }
  ]} 
  defaultValue="basic"
/>

Props

options
array
required
Array of options { label: string, value: string }.
name
string
required
Field name grouping the radios.
defaultValue
string
Initially selected value.
direction
string
default:"vertical"
Layout direction: vertical or horizontal.

Examples

Horizontal Options

<RadioGroup 
  direction="horizontal" 
  options={[
    { label: "Yes", value: "yes" },
    { label: "No", value: "no" }
  ]} 
/>