Forms

RadioGroup

An accessible radio button group component for selecting one option from a set. Essential for healthcare forms where mutually exclusive options are common (e.g., appointment type, insurance plan, priority level).

Basic Usage

Use RadioGroup for mutually exclusive selections. Perfect for appointment types, visit reasons, and other single-choice scenarios.

Appointment Type

Select the type of appointment you need

Consultation Follow-up Emergency Routine Check-up

With Descriptions

Add descriptions to help users understand each option. Especially useful for complex choices like insurance plans or treatment options.

Insurance Plan

Select your primary insurance provider

HMO Health Maintenance Organization - Lower cost, requires referrals PPO Preferred Provider Organization - More flexibility, higher cost EPO Exclusive Provider Organization - No out-of-network coverage POS Point of Service - Combines HMO and PPO features

Horizontal Layout

Use horizontal orientation for compact layouts or when options are short. Ideal for payment methods or simple status selections.

Payment Method

Insurance Cash Credit/Debit Card HSA/FSA

Disabled Options

Disable specific options when they're not available or require special permissions. The entire group can also be disabled.

Priority Level

Some options require administrator approval

Low Non-urgent, can wait Medium Standard priority High Urgent attention needed Critical Immediate medical attention required

Visit Reason (Disabled)

This field is disabled during system maintenance

New Symptoms Medication Review Test Results Discussion Preventive Care

Validation

Show error messages when validation fails. Use validateOnMount to show errors immediately.

Visit Reason

New Symptoms Medication Review Test Results Discussion Preventive Care

Required Selection (validateOnMount)

Consultation Follow-up Emergency Routine Check-up

Please select an option to continue

Props

Prop	Type	Default	Description
`id`	`string`	—	Unique identifier for the radio group
`name`	`string`	—	Form field name
`label`	`string`	—	Group label (required)
`options`	`RadioOption[]`	—	Radio options array (required)
`value`	`string`	—	Currently selected value
`required`	`boolean`	false	Whether a selection is required
`disabled`	`boolean`	false	Whether the entire group is disabled
`error`	`string`	—	Error message to display
`hint`	`string`	—	Hint text
`size`	`'sm' \| 'md' \| 'lg'`	'md'	Size of the radio buttons
`orientation`	`'vertical' \| 'horizontal'`	'vertical'	Layout orientation
`hideLabel`	`boolean`	false	Whether to hide the group label visually
`class`	`string`	—	Additional CSS classes
`onchange`	`(value: string) => void`	—	Change handler
`testId`	`string`	—	Test ID for e2e testing
`validateOnMount`	`boolean`	false	Show validation state immediately without waiting for interaction

Healthcare Best Practices

• Always use required for critical selections like insurance plan or appointment type
• Provide clear descriptions for complex options (e.g., insurance plan types, treatment options)
• Use horizontal layout sparingly - vertical layout is more accessible and easier to scan
• Disable options rather than hiding them when they're temporarily unavailable - this provides better context
• Show validation errors only after user interaction to avoid overwhelming users
• Include hint text to guide users, especially for fields with regulatory requirements
• Ensure proper keyboard navigation and screen reader support for accessibility compliance
• Group related options logically (e.g., all appointment types together, all payment methods together)