Component
Radio
Radio buttons for single selection from multiple options.
tsx
import { Radio, RadioGroup, RadioCardGroup } from 'wss3-forge'Usage
•
Use RadioGroup to manage selection
•
RadioCardGroup for card-style selection
•
Use for mutually exclusive options
•
Prefer Select for many options
Examples
Basic Radio Group
tsx
1<VStack gap="sm">2 <Radio name="plan" label="Free" value="free" checked={plan === 'free'} onChange={() => setPlan('free')} />3 <Radio name="plan" label="Pro" value="pro" checked={plan === 'pro'} onChange={() => setPlan('pro')} />4 <Radio name="plan" label="Enterprise" value="enterprise" checked={plan === 'enterprise'} onChange={() => setPlan('enterprise')} />5</VStack>Horizontal Layout
tsx
1<HStack gap="lg">2 <Radio name="size" label="Small" value="sm" checked={size === 'sm'} onChange={...} />3 <Radio name="size" label="Medium" value="md" checked={size === 'md'} onChange={...} />4 <Radio name="size" label="Large" value="lg" checked={size === 'lg'} onChange={...} />5</HStack>Disabled State
tsx
1<Radio name="opt" label="Available" value="a" checked={true} onChange={...} />2<Radio name="opt" label="Disabled" value="b" checked={false} onChange={...} disabled />Previous
PhoneInput
Next
SearchInput
Last updated: December 2025