Radio

A set of mutually exclusive options. Use RadioGroup to wrap multiple Radio components.

Basic Usage

AppleBananaCherry

Horizontal Layout

SmallMediumLarge

Variants

Primary APrimary B

Secondary ASecondary B

Disabled

Option AOption B

RadioGroup Props

Prop	Type	Default	Description
name	string	-	Name attribute for all radios in this group
value	string	-	Controlled selected value
defaultValue	string	-	Default selected value (uncontrolled)
onChange	(value: string) => void	-	Callback when the selected value changes
variant	'primary' | 'secondary'	'primary'	Color variant
direction	'horizontal' | 'vertical'	'vertical'	Layout direction
disabled	boolean	false	Whether all radios are disabled
children	ReactNode	-	Radio elements
className	string	-	Additional CSS class
style	CSSProperties	-	Inline styles

Mobile considerations

• The clickable area covers the label + dot so the 44px tap target is met.
• For long option lists on mobile, consider <SegmentedControl> (2-4 options, equal width) or a Select with mobileVariant="sheet" (many options).
• direction="horizontal" is fine on desktop but may overflow on mobile — switch to vertical with a media query or use useTouchDevice() to pick at runtime.

Radio Props

Prop	Type	Default	Description
value	string	-	Value of this radio option
label	string	-	Text label
required	boolean	false	Whether the field is required (shows red asterisk)
disabled	boolean	false	Whether the radio is disabled
className	string	-	Additional CSS class
style	CSSProperties	-	Inline styles