ComponentsFormRadio

Radio

6 colors · 3 sizes · card · button · segmented display modes

StatesColorsSizesHorizontalError stateCardButtonSegmented

Default

Live preview

Vertical list with helper text and a disabled option

Notification preference

EmailReceive updates via email

SMSReceive updates via text message

PushReceive push notifications

NoneDo not receive notifications

App.tsx

tsx

1const [notify, setNotify] = useState('email')
2 
3<RadioGroup legend="Notification preference" value={notify} onChange={setNotify}>
4  <Radio value="email" label="Email"  helperText="Receive updates via email" />
5  <Radio value="sms"   label="SMS"    helperText="Receive updates via text message" />
6  <Radio value="push"  label="Push"   helperText="Receive push notifications" />
7  <Radio value="none"  label="None"   helperText="Do not receive notifications" disabled />
8</RadioGroup>

Colors

Live preview

Six color variants — default, secondary, success, warning, error, and info

App.tsx

tsx

1const [color, setColor] = useState('default')
2 
3<RadioGroup legend="Select color" value={color} onChange={setColor} direction="horizontal">
4  <Radio value="default"   label="Default"   color="default"   />
5  <Radio value="secondary" label="Secondary" color="secondary" />
6  <Radio value="success"   label="Success"   color="success"   />
7  <Radio value="warning"   label="Warning"   color="warning"   />
8  <Radio value="error"     label="Error"     color="error"     />
9  <Radio value="info"      label="Info"      color="info"      />
10</RadioGroup>

Sizes

Live preview

sm, md (default), and lg radio sizes

Size

Small

Medium (default)

Large

App.tsx

tsx

1const [size, setSize] = useState('md')
2 
3<RadioGroup legend="Size" value={size} onChange={setSize}>
4  <Radio value="sm" label="Small"            size="sm" />
5  <Radio value="md" label="Medium (default)" size="md" />
6  <Radio value="lg" label="Large"            size="lg" />
7</RadioGroup>

Horizontal layout

Live preview

Use orientation=horizontal for inline radio groups

Calendar view

Day

Week

Month

Year

App.tsx

tsx

1const [view, setView] = useState('week')
2 
3<RadioGroup legend="Calendar view" value={view} onChange={setView} direction="horizontal">
4  <Radio value="day"   label="Day"   />
5  <Radio value="week"  label="Week"  />
6  <Radio value="month" label="Month" />
7  <Radio value="year"  label="Year"  />
8</RadioGroup>

Error state

Live preview

Group-level error with message — requires a selection

Gender

Male

Female

Other

Please select a gender

App.tsx

tsx

1const [gender, setGender] = useState('')
2 
3<RadioGroup
4  legend="Gender"
5  value={gender}
6  onChange={setGender}
7  error={!gender}
8  errorText="Please select a gender"
9>
10  <Radio value="male"   label="Male"   required />
11  <Radio value="female" label="Female" />
12  <Radio value="other"  label="Other"  />
13</RadioGroup>

Card style

Live preview

Bordered card layout — ideal for plan or tier selection

Choose a plan

Starter

$0/month · 3 projects · Community support

Pro

$12/month · Unlimited projects · Priority support

Team

$49/month · Up to 10 members · Admin controls

Enterprise

Custom pricing · Unlimited members · SLA

App.tsx

tsx

1const [plan, setPlan] = useState('pro')
2 
3<RadioGroup legend="Choose a plan" value={plan} onChange={setPlan} display="card">
<Radio
  value="starter"
  label="Starter"
  description="$0/month · 3 projects · Community support"
/>
<Radio
  value="pro"
  label="Pro"
  description="$12/month · Unlimited projects · Priority support"
/>
<Radio
  value="team"
  label="Team"
  description="$49/month · Up to 10 members · Admin controls"
/>
<Radio
  value="enterprise"
  label="Enterprise"
  description="Custom pricing · Unlimited members · SLA"
  disabled
/>
25</RadioGroup>

Button style

Live preview

Pill-button style group — great for toggles and billing cycles

Billing cycle

MonthlyQuarterlyYearly

App.tsx

tsx

1const [billing, setBilling] = useState('yearly')
2 
3<RadioGroup legend="Billing cycle" value={billing} onChange={setBilling} display="button">
4  <Radio value="monthly"   label="Monthly"   />
5  <Radio value="quarterly" label="Quarterly" />
6  <Radio value="yearly"    label="Yearly"    />
7</RadioGroup>

Segmented control

Live preview

Compact connected button group — ideal for view switchers

Calendar view

DayWeekMonthYear

App.tsx

tsx

1const [view, setView] = useState('week')
2 
3<RadioGroup legend="Calendar view" value={view} onChange={setView} display="segmented">
4  <Radio value="day"   label="Day"   />
5  <Radio value="week"  label="Week"  />
6  <Radio value="month" label="Month" />
7  <Radio value="year"  label="Year"  />
8</RadioGroup>

Radio props

Props

PropTypeDefaultDescription

labelReactNode—Label text shown next to the radio

helperTextstring—Helper text shown below the label

requiredbooleanfalseMarks as required — adds * to label

errorbooleanfalseError state — red border

errorTextstring—Error message shown when error=true

cardbooleanfalseWraps the radio in a bordered card

descriptionstring—Description inside the card (card=true only)

size'sm' | 'md' | 'lg''md'Size of the radio button

disabledbooleanfalseDisables the radio button

valuestring—Value used inside RadioGroup

checkedboolean—Controlled checked state

defaultCheckedbooleanfalseUncontrolled initial checked state

onChangeReact.ChangeEventHandler<HTMLInputElement>—Change event callback

RadioGroup props

Props

PropTypeDefaultDescription

legendstring—Group label shown above the radios

valuestring—Controlled selected value

onChange(value: string) => void—Callback fired when selection changes

display'default' | 'card' | 'button' | 'segmented''default'Layout style for the group

size'sm' | 'md' | 'lg'—Size applied to all child radios

orientation'horizontal' | 'vertical''vertical'Stacking direction of the radios

errorbooleanfalseError state for the group

errorTextstring—Error message shown below the group

childrenReactNode—Radio components with a value prop