RadioGroup

Group of radio buttons with shared state management.

Also known as: option group, single select group, radio list

View in Storybook

When to use

• Group of radio buttons for single selection. For cards with descriptions, use RadioCard.
• For dropdown-style, use Select.

Import

import { RadioGroup } from '@vacano/ui'

Usage

const [value, setValue] = useState<string | null>('option1')

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
]

<RadioGroup
  options={options}
  value={value}
  onChange={setValue}
/>

Type-safe Values

RadioGroup is generic -- the value type is inferred from options:

type Color = 'red' | 'green' | 'blue'

const [color, setColor] = useState<Color | null>('red')

const options: RadioGroupOption<Color>[] = [
  { value: 'red', label: 'Red' },
  { value: 'green', label: 'Green' },
  { value: 'blue', label: 'Blue' },
]

<RadioGroup<Color>
  options={options}
  value={color}     // Color | null
  onChange={setColor} // (value: Color) => void
/>

With Label

<RadioGroup
  label="Select an option"
  options={options}
  value={value}
  onChange={setValue}
/>

With Name

<RadioGroup
  name="preferences"
  options={options}
  value={value}
  onChange={setValue}
/>

Disabled

<RadioGroup
  disabled
  options={options}
  value="option1"
  onChange={() => {}}
/>

Props

Prop	Type	Default	Description
options	RadioGroupOption<T>[]	required	Array of options
value	T | null	required	Selected value
onChange	(value: T) => void	required	Change handler
label	string	-	Group label
name	string	-	Input name for all radios
variant	'normal' | 'error'	'normal'	Visual variant for all radios
disabled	boolean	false	Disable all radios
className	string	-	CSS class for root element
classnames	RadioGroupClassNames	-	Custom class names for inner elements
ref	Ref<HTMLDivElement>	-	Ref to the root container element
data-test-id	string	-	Test identifier for automated testing

T extends string and defaults to string.

Option Type

type RadioGroupOption<T extends string = string> = {
  label: string
  value: T
}

ClassNames

Key	Description
label	Group label
options	Options container
radio	Individual radio

Related

• Radio - Individual radio button
• RadioCard - Card-style radio
• CheckboxGroup - Multiple selection group
• Select - Dropdown selection