Radio

The Radio component allows users to select a single option from a list of choices, providing a clean and accessible interface for exclusive selection.

Import

import { Radio, RadioGroup } from 'h2o-library';

Basic Usage

Simple Radio Button

<Radio 
  name="option" 
  value="1" 
  label="Option 1" 
/>

Radio Group

<RadioGroup
  options={[
    { label: "Small", value: "small", icon: "info" },
    { label: "Medium", value: "medium", icon: "info" },
    { label: "Large", value: "large", icon: "info" }
  ]}
  selected="small"
  optionClassName="w-38"
  onSelect={(value) => console.log(value)}
/>

Radio States

<Radio 
  name="states" 
  value="unchecked" 
  label="Unchecked" 
/>
<Radio 
  name="states" 
  value="checked" 
  label="Checked" 
  defaultChecked
/>

Disabled States

<Radio 
  name="disabled"
  value="disabled"
  label="Disabled"
  disabled
/>
<Radio 
  name="disabled"
  value="disabled-checked"
  label="Disabled Checked"
  disabled
  checked
/>

Interactive Examples

For interactive examples including radio groups, state management, and more complex use cases, check out our example component:

Props

Radio Props

Prop	Type	Default	Description
label	string	-	The label text for the radio button
name	string	-	The name of the radio button group
value	string	-	The value of the radio button
className	string	-	Additional CSS classes
disabled	boolean	false	Whether the radio button is disabled
checked	boolean	false	Whether the radio button is checked
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	-	Callback when radio button changes

Plus all standard HTML input attributes except type.

RadioGroup Props

Prop	Type	Default	Description
options	RadioOption[]	-	Array of options for the radio group
selected	string	-	The currently selected value
onSelect	(value: string) => void	-	Callback when an option is selected
className	string	-	Additional CSS classes for the group container
optionClassName	string	-	Additional CSS classes for each option

RadioOption Type

interface RadioOption {
  label: string;
  value: string;
  icon?: IconType;
}

Design Considerations

• Clear visual feedback with hover and active states
• Proper spacing between radio buttons in a group
• Consistent alignment of radio buttons and labels
• Support for both controlled and uncontrolled usage
• Maintains accessibility with proper ARIA attributes and keyboard navigation
• Icon support in radio groups for enhanced visual communication

Accessibility

• Radio buttons are keyboard accessible (Tab to focus, Space to select)
• Labels are properly associated with inputs
• Radio groups use the same 'name' attribute
• Focus states are clearly visible
• ARIA attributes are automatically handled
• Screen readers announce the current state and grouping
• Radio groups maintain proper focus management