RadioGroup

A radio button group component for selecting a single value from a list of options. Supports descriptions per option, disabled state, and a custom render function for labels.

Import

import { RadioGroup } from '@wavebooking/aqua-fusion';

Preview

Live PreviewOpen in Storybook

Loading preview...

Usage

<RadioGroup
  name="plan"
  options={[
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro', description: 'Unlimited access' },
    { value: 'enterprise', label: 'Enterprise' },
  ]}
  value={selected}
  onChange={(value) => setSelected(value)}
/>

Props

Prop	Type	Default	Description
`options`*	RadioOption[]	-	Array of options. Each option has a value, label, and optional description.
`value`	string	-	The currently selected value (controlled).
`onChange`	(value: string) => void	-	Callback fired when the selected value changes.
`name`	string	-	HTML name attribute shared by all radio inputs in the group.
`disabled`	boolean	`false`	Whether all radio options are disabled.
`renderLabel`	(option: RadioOption) => ReactNode	-	Custom render function for option labels.
`className`	string	-	Additional CSS classes for the group container.
`classNameOption`	string	-	Additional CSS classes applied to each option wrapper.

RadioOption

Property	Type	Description
`value`	`string`	The value of the option.
`label`	`string`	Display text for the option.
`description`	`string`	Optional description text below the label.