---
title: Radio Group
description: A set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/label"
	"github.com/axadrn/shadcn-templ/v2/components/radiogroup"
)

templ RadioGroupDemo() {
	@radiogroup.RadioGroup(radiogroup.Props{Value: "comfortable", Class: "w-fit"}) {
		<div class="flex items-center gap-3">
			@radiogroup.Item(radiogroup.ItemProps{ID: "r1", Value: "default"})
			@label.Label(label.Props{For: "r1"}) {
				Default
			}
		</div>
		<div class="flex items-center gap-3">
			@radiogroup.Item(radiogroup.ItemProps{ID: "r2", Value: "comfortable"})
			@label.Label(label.Props{For: "r2"}) {
				Comfortable
			}
		</div>
		<div class="flex items-center gap-3">
			@radiogroup.Item(radiogroup.ItemProps{ID: "r3", Value: "compact"})
			@label.Label(label.Props{For: "r3"}) {
				Compact
			}
		</div>
	}
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add radio-group
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="radio-group" title="components/radiogroup/radiogroup.templ" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import (
	"github.com/axadrn/shadcn-templ/v2/components/label"
	"github.com/axadrn/shadcn-templ/v2/components/radio"
)
```

```templ showLineNumbers
@radiogroup.RadioGroup(radiogroup.Props{Value: "option-one"}) {
	<div class="flex items-center gap-3">
		@radiogroup.Item(radiogroup.ItemProps{ID: "option-one", Value: "option-one"})
		@label.Label(label.Props{For: "option-one"}) {
			Option One
		}
	</div>
	<div class="flex items-center gap-3">
		@radiogroup.Item(radiogroup.ItemProps{ID: "option-two", Value: "option-two"})
		@label.Label(label.Props{For: "option-two"}) {
			Option Two
		}
	</div>
}
```

## Composition

Use the following composition to build a `RadioGroup`:

```text
radiogroup.RadioGroup
├── radiogroup.Item
└── radiogroup.Item
```

## Description

Radio group items with a description using the `Field` component.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/radiogroup"
)

templ RadioGroupDescription() {
	@radiogroup.RadioGroup(radiogroup.Props{Value: "comfortable", Class: "w-fit"}) {
		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
			@radiogroup.Item(radiogroup.ItemProps{ID: "desc-r1", Value: "default"})
			@field.Content() {
				@field.Label(field.LabelProps{For: "desc-r1"}) {
					Default
				}
				@field.Description() {
					Standard spacing for most use cases.
				}
			}
		}
		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
			@radiogroup.Item(radiogroup.ItemProps{ID: "desc-r2", Value: "comfortable"})
			@field.Content() {
				@field.Label(field.LabelProps{For: "desc-r2"}) {
					Comfortable
				}
				@field.Description() {
					More space between elements.
				}
			}
		}
		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
			@radiogroup.Item(radiogroup.ItemProps{ID: "desc-r3", Value: "compact"})
			@field.Content() {
				@field.Label(field.LabelProps{For: "desc-r3"}) {
					Compact
				}
				@field.Description() {
					Minimal spacing for dense layouts.
				}
			}
		}
	}
}
```

## Choice Card

Use `field.Label` to wrap the entire `field.Field` for a clickable card-style selection.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/radiogroup"
)

templ RadioGroupChoiceCard() {
	@radiogroup.RadioGroup(radiogroup.Props{Value: "plus", Class: "max-w-sm"}) {
		@field.Label(field.LabelProps{For: "plus-plan"}) {
			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
				@field.Content() {
					@field.Title() {
						Plus
					}
					@field.Description() {
						For individuals and small teams.
					}
				}
				@radiogroup.Item(radiogroup.ItemProps{ID: "plus-plan", Value: "plus"})
			}
		}
		@field.Label(field.LabelProps{For: "pro-plan"}) {
			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
				@field.Content() {
					@field.Title() {
						Pro
					}
					@field.Description() {
						For growing businesses.
					}
				}
				@radiogroup.Item(radiogroup.ItemProps{ID: "pro-plan", Value: "pro"})
			}
		}
		@field.Label(field.LabelProps{For: "enterprise-plan"}) {
			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
				@field.Content() {
					@field.Title() {
						Enterprise
					}
					@field.Description() {
						For large teams and enterprises.
					}
				}
				@radiogroup.Item(radiogroup.ItemProps{ID: "enterprise-plan", Value: "enterprise"})
			}
		}
	}
}
```

## Fieldset

Use `field.Set` and `field.Legend` to group radio items with a label and description.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/radiogroup"
)

templ RadioGroupFieldset() {
	@field.Set(field.SetProps{Class: "w-full max-w-xs"}) {
		@field.Legend(field.LegendProps{Variant: field.LegendVariantLabel}) {
			Subscription Plan
		}
		@field.Description() {
			Yearly and lifetime plans offer significant savings.
		}
		@radiogroup.RadioGroup(radiogroup.Props{Value: "monthly"}) {
			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
				@radiogroup.Item(radiogroup.ItemProps{ID: "plan-monthly", Value: "monthly"})
				@field.Label(field.LabelProps{For: "plan-monthly", Class: "font-normal"}) {
					Monthly ($9.99/month)
				}
			}
			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
				@radiogroup.Item(radiogroup.ItemProps{ID: "plan-yearly", Value: "yearly"})
				@field.Label(field.LabelProps{For: "plan-yearly", Class: "font-normal"}) {
					Yearly ($99.99/year)
				}
			}
			@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
				@radiogroup.Item(radiogroup.ItemProps{ID: "plan-lifetime", Value: "lifetime"})
				@field.Label(field.LabelProps{For: "plan-lifetime", Class: "font-normal"}) {
					Lifetime ($299.99)
				}
			}
		}
	}
}
```

## Disabled

Use the `Disabled` prop on `radiogroup.RadioGroup` to disable all items.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/radiogroup"
)

templ RadioGroupDisabled() {
	@radiogroup.RadioGroup(radiogroup.Props{Value: "option2", Class: "w-fit"}) {
		@field.Field(field.Props{Orientation: field.OrientationHorizontal, Attributes: templ.Attributes{"data-disabled": "true"}}) {
			@radiogroup.Item(radiogroup.ItemProps{ID: "disabled-1", Value: "option1", Disabled: true})
			@field.Label(field.LabelProps{For: "disabled-1", Class: "font-normal"}) {
				Disabled
			}
		}
		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
			@radiogroup.Item(radiogroup.ItemProps{ID: "disabled-2", Value: "option2"})
			@field.Label(field.LabelProps{For: "disabled-2", Class: "font-normal"}) {
				Option 2
			}
		}
		@field.Field(field.Props{Orientation: field.OrientationHorizontal}) {
			@radiogroup.Item(radiogroup.ItemProps{ID: "disabled-3", Value: "option3"})
			@field.Label(field.LabelProps{For: "disabled-3", Class: "font-normal"}) {
				Option 3
			}
		}
	}
}
```

## Invalid

Use `aria-invalid` on `radiogroup.Item` and `Invalid` on `field.Field` to show validation errors.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/radiogroup"
)

templ RadioGroupInvalid() {
	@field.Set(field.SetProps{Class: "w-full max-w-xs"}) {
		@field.Legend(field.LegendProps{Variant: field.LegendVariantLabel}) {
			Notification Preferences
		}
		@field.Description() {
			Choose how you want to receive notifications.
		}
		@radiogroup.RadioGroup(radiogroup.Props{Value: "email"}) {
			@field.Field(field.Props{Orientation: field.OrientationHorizontal, Attributes: templ.Attributes{"aria-invalid": "true"}}) {
				@radiogroup.Item(radiogroup.ItemProps{ID: "invalid-email", Value: "email", Attributes: templ.Attributes{"aria-invalid": "true"}})
				@field.Label(field.LabelProps{For: "invalid-email", Class: "font-normal"}) {
					Email only
				}
			}
			@field.Field(field.Props{Orientation: field.OrientationHorizontal, Attributes: templ.Attributes{"aria-invalid": "true"}}) {
				@radiogroup.Item(radiogroup.ItemProps{ID: "invalid-sms", Value: "sms", Attributes: templ.Attributes{"aria-invalid": "true"}})
				@field.Label(field.LabelProps{For: "invalid-sms", Class: "font-normal"}) {
					SMS only
				}
			}
			@field.Field(field.Props{Orientation: field.OrientationHorizontal, Attributes: templ.Attributes{"aria-invalid": "true"}}) {
				@radiogroup.Item(radiogroup.ItemProps{ID: "invalid-both", Value: "both", Attributes: templ.Attributes{"aria-invalid": "true"}})
				@field.Label(field.LabelProps{For: "invalid-both", Class: "font-normal"}) {
					Both Email & SMS
				}
			}
		}
	}
}
```

## API Reference

### RadioGroup

The `radiogroup.RadioGroup` component shares the name and the selected value with its items.

| Prop       | Type     | Default |
| ---------- | -------- | ------- |
| `Name`     | `string` | random  |
| `Value`    | `string` | -       |
| `Disabled` | `bool`   | `false` |
| `Class`    | `string` | -       |

### RadioGroupItem

The `radiogroup.Item` component is a single radio button with a hidden native input.

| Prop       | Type     | Default |
| ---------- | -------- | ------- |
| `Name`     | `string` | group   |
| `Value`    | `string` | -       |
| `Checked`  | `bool`   | `false` |
| `Disabled` | `bool`   | `false` |
| `Form`     | `string` | -       |
| `Class`    | `string` | -       |