RadioGroup

A control that allows users to select a single option from a list of mutually exclusive options.

Base

Option 1

Option 2

Option 3

<RadioGroup 
  defaultValue="option1"
  items={[
    { value: "option1", label: "Option 1" },
    { value: "option2", label: "Option 2" },
    { value: "option3", label: "Option 3" },
  ]}
/>

With descriptions

Basic

Perfect for individuals

Pro

Best for growing teams

Enterprise

Advanced features

<RadioGroup 
  defaultValue="basic"
  items={[
    {
      value: "basic",
      label: "Basic",
      description: "Perfect for individuals"
    },
    {
      value: "pro",
      label: "Pro", 
      description: "Best for growing teams"
    },
    {
      value: "enterprise",
      label: "Enterprise",
      description: "Advanced features"
    },
  ]}
/>

Disabled

Checked disabled

Unchecked and disabled

 <RadioGroup
  items={[
      {
          value: "option1",
          label: "Checked disabled",
          checked: true,
          disabled: true,
      },
      { value: "option2", label: "Unchecked and disabled", disabled: true },
  ]}
/>

Sizes

Small size

Medium size

<RadioGroup 
  size="sm" 
  defaultValue="sm1"
  items={[
    { value: "sm1", label: "Small option", description: "Size sm" },
    { value: "sm2", label: "Another small option" },
  ]}
/>

<RadioGroup 
  size="md" 
  defaultValue="md1"
  items={[
    { value: "md1", label: "Medium option", description: "Size md" },
    { value: "md2", label: "Another medium option" },
  ]}
/>

Without labels

<RadioGroup 
  defaultValue="option1" 
  className="flex-row gap-4"
  items={[
    { value: "option1" },
    { value: "option2" },
    { value: "option3" },
  ]}
/>

Form Integration

<RadioGroupForm
  control={form.control}
  name="plan"
  groupLabel="Choose your plan"
  groupDescription="Select the plan that best fits your needs."
  options={planOptions}
/>

API Reference

RadioGroup

Props	Type	Default	Description
size?	"sm" \| "md"	"sm"	Size of the radio group items.
value?	string	-	The controlled value of the radio group. Must be used in conjunction with onValueChange.
onValueChange?	function[(value: string) => void]	-	Event handler called when the value of the radio group changes.
defaultValue?	string	-	Initial selected value.
disabled?	boolean	false	When true, prevents the user from interacting with radio items.
items	RadioItem[]	-	Array of items to render in the radio group.

RadioItem

Props	Type	Default	Description
value	string	-	The unique value of the radio item.
size?	"sm" \| "md"	"sm"	Size of the radio item.
label?	React.ReactNode	-	The label text for the radio item.
description?	React.ReactNode	-	The description text for the radio item.
disabled?	boolean	false	When true, prevents the user from interacting with the item.
className?	string	-	Additional styles for the radio item.

RadioGroupForm

The following props plus react-hook-form props (name, control...) and all RadioGroup props except defaultValue, value and onValueChange

Props	Type	Default	Description
groupLabel?	string	-	Form label for the radio group
groupLabelTooltip?	string	-	Form label tooltip
groupDescription?	string	-	Form description for the radio group
isRequired?	boolean	false	To indicate requirement to users.
wrapperClassName?	string	-	Additional styles for RadioGroup, label and description wrapper.
options	RadioItem[]	-	Array of options for the radio group.