RadioGroup

Radio button groups with consistent Storm styling. Supports vertical and horizontal orientations with multiple sizes.

Usage

tsx

1import { RadioGroup, RadioGroupItem, Label } from '@storm-ds/ui'
2
3<RadioGroup>
4  <div className="flex items-center gap-2">
5    <RadioGroupItem name="plan" value="free" id="free" />
6    <Label htmlFor="free">Free</Label>
7  </div>
8  <div className="flex items-center gap-2">
9    <RadioGroupItem name="plan" value="pro" id="pro" />
10    <Label htmlFor="pro">Pro</Label>
11  </div>
12</RadioGroup>

Default

Option 1

Option 2

Option 3

tsx

1<RadioGroup>
2  <div className="flex items-center gap-2">
3    <RadioGroupItem name="example" value="opt1" id="r1" defaultChecked />
4    <Label htmlFor="r1">Option 1</Label>
5  </div>
6  <div className="flex items-center gap-2">
7    <RadioGroupItem name="example" value="opt2" id="r2" />
8    <Label htmlFor="r2">Option 2</Label>
9  </div>
10  <div className="flex items-center gap-2">
11    <RadioGroupItem name="example" value="opt3" id="r3" />
12    <Label htmlFor="r3">Option 3</Label>
13  </div>
14</RadioGroup>

Horizontal

Option A

Option B

Option C

tsx

1<RadioGroup orientation="horizontal">
2  <div className="flex items-center gap-2">
3    <RadioGroupItem name="hz" value="a" id="hz1" defaultChecked />
4    <Label htmlFor="hz1">Option A</Label>
5  </div>
6  <div className="flex items-center gap-2">
7    <RadioGroupItem name="hz" value="b" id="hz2" />
8    <Label htmlFor="hz2">Option B</Label>
9  </div>
10  <div className="flex items-center gap-2">
11    <RadioGroupItem name="hz" value="c" id="hz3" />
12    <Label htmlFor="hz3">Option C</Label>
13  </div>
14</RadioGroup>

Sizes

Small

Medium

Large

tsx

1<div className="flex items-center gap-2">
2  <RadioGroupItem name="sz" value="sm" size="sm" id="rsz1" defaultChecked />
3  <Label htmlFor="rsz1">Small</Label>
4</div>
5<div className="flex items-center gap-2">
6  <RadioGroupItem name="sz" value="md" size="md" id="rsz2" />
7  <Label htmlFor="rsz2">Medium</Label>
8</div>
9<div className="flex items-center gap-2">
10  <RadioGroupItem name="sz" value="lg" size="lg" id="rsz3" />
11  <Label htmlFor="rsz3">Large</Label>
12</div>

With Description

Free

Up to 3 projects

Pro

Unlimited projects

tsx

1<RadioGroup>
2  <div className="flex gap-2">
3    <RadioGroupItem name="plan" value="free" id="plan1" className="mt-0.5" defaultChecked />
4    <div>
5      <Label htmlFor="plan1">Free</Label>
6      <p className="text-xs text-storm-muted-foreground">Up to 3 projects</p>
7    </div>
8  </div>
9  <div className="flex gap-2">
10    <RadioGroupItem name="plan" value="pro" id="plan2" className="mt-0.5" />
11    <div>
12      <Label htmlFor="plan2">Pro</Label>
13      <p className="text-xs text-storm-muted-foreground">Unlimited projects</p>
14    </div>
15  </div>
16</RadioGroup>

Props

Prop	Type	Default	Description
className	string	-	Custom classes on RadioGroup
orientation	'vertical' \| 'horizontal'	'vertical'	Layout direction
name	string	-	Shared name for radio items (on RadioGroupItem)
value	string	-	Value of the radio item (on RadioGroupItem)
size	'sm' \| 'md' \| 'lg'	'md'	Radio size (on RadioGroupItem)

Use with AI

Create a Next.js component using Storm UI's RadioGroup. Import: `import { RadioGroup, RadioGroupItem, Label } from '@storm-ds/ui'`. RadioGroup is a div[role="radiogroup"] supporting `orientation` prop ('vertical' | 'horizontal', default 'vertical'). RadioGroupItem is a native radio input with custom styling supporting `size` prop ('sm' | 'md' | 'lg', default 'md'). Put name on each RadioGroupItem. Example: `<RadioGroup orientation="horizontal"><div className="flex items-center gap-2"><RadioGroupItem name="plan" value="free" id="free" /><Label htmlFor="free">Free</Label></div></RadioGroup>`