A set of checkable buttons where no more than one can be selected at a time.
<RadioGroup DefaultValue="comfortable" Class="w-fit">
<div class="flex items-center gap-3">
<RadioGroupItem Value="default" Id="r1" />
<Label for="r1">Default</Label>
</div>
<div class="flex items-center gap-3">
<RadioGroupItem Value="comfortable" Id="r2" />
<Label for="r2">Comfortable</Label>
</div>
<div class="flex items-center gap-3">
<RadioGroupItem Value="compact" Id="r3" />
<Label for="r3">Compact</Label>
</div>
</RadioGroup>Installation
Install the radio group component using the command or manual steps.
blazor-shadcn add radio-groupUsage
@using ShadcnBlazor.Components.UI<RadioGroup DefaultValue="comfortable">
<div class="flex items-center gap-3">
<RadioGroupItem Value="default" Id="r1" />
<Label for="r1">Default</Label>
</div>
<div class="flex items-center gap-3">
<RadioGroupItem Value="comfortable" Id="r2" />
<Label for="r2">Comfortable</Label>
</div>
<div class="flex items-center gap-3">
<RadioGroupItem Value="compact" Id="r3" />
<Label for="r3">Compact</Label>
</div>
</RadioGroup>Examples
Description
Standard spacing for most use cases.
More space between elements.
Minimal spacing for dense layouts.
<RadioGroup DefaultValue="comfortable" Class="w-fit">
<div class="flex items-start gap-3">
<RadioGroupItem Value="default" Id="desc-r1" />
<div class="grid gap-1">
<Label for="desc-r1" Class="font-medium">Default</Label>
<p class="text-muted-foreground text-sm">Standard spacing for most use cases.</p>
</div>
</div>
<div class="flex items-start gap-3">
<RadioGroupItem Value="comfortable" Id="desc-r2" />
<div class="grid gap-1">
<Label for="desc-r2" Class="font-medium">Comfortable</Label>
<p class="text-muted-foreground text-sm">More space between elements.</p>
</div>
</div>
<div class="flex items-start gap-3">
<RadioGroupItem Value="compact" Id="desc-r3" />
<div class="grid gap-1">
<Label for="desc-r3" Class="font-medium">Compact</Label>
<p class="text-muted-foreground text-sm">Minimal spacing for dense layouts.</p>
</div>
</div>
</RadioGroup>Choice Card
<RadioGroup DefaultValue="plus" Class="max-w-sm">
<label for="plus-plan" class="flex rounded-lg border p-4">
<div class="flex-1 space-y-1">
<p class="text-sm font-medium leading-none">Plus</p>
<p class="text-muted-foreground text-sm">For individuals and small teams.</p>
</div>
<RadioGroupItem Value="plus" Id="plus-plan" />
</label>
<label for="pro-plan" class="flex rounded-lg border p-4">
<div class="flex-1 space-y-1">
<p class="text-sm font-medium leading-none">Pro</p>
<p class="text-muted-foreground text-sm">For growing businesses.</p>
</div>
<RadioGroupItem Value="pro" Id="pro-plan" />
</label>
<label for="enterprise-plan" class="flex rounded-lg border p-4">
<div class="flex-1 space-y-1">
<p class="text-sm font-medium leading-none">Enterprise</p>
<p class="text-muted-foreground text-sm">For large teams and enterprises.</p>
</div>
<RadioGroupItem Value="enterprise" Id="enterprise-plan" />
</label>
</RadioGroup>Disabled
<RadioGroup DefaultValue="option2" Class="w-fit">
<div class="flex items-center gap-3 opacity-50" data-disabled>
<RadioGroupItem Value="option1" Id="disabled-1" Disabled="true" />
<Label for="disabled-1" Class="font-normal">Disabled</Label>
</div>
<div class="flex items-center gap-3">
<RadioGroupItem Value="option2" Id="disabled-2" />
<Label for="disabled-2" Class="font-normal">Option 2</Label>
</div>
<div class="flex items-center gap-3">
<RadioGroupItem Value="option3" Id="disabled-3" />
<Label for="disabled-3" Class="font-normal">Option 3</Label>
</div>
</RadioGroup>Invalid
Notification Preferences
Choose how you want to receive notifications.
<div class="w-full max-w-xs space-y-3">
<div class="space-y-1">
<p class="text-sm font-medium leading-none">Notification Preferences</p>
<p class="text-muted-foreground text-sm">Choose how you want to receive notifications.</p>
</div>
<RadioGroup DefaultValue="email">
<div class="flex items-center gap-3" data-invalid>
<RadioGroupItem Value="email" Id="invalid-email" aria-invalid="true" />
<Label for="invalid-email" Class="font-normal text-destructive">Email only</Label>
</div>
<div class="flex items-center gap-3" data-invalid>
<RadioGroupItem Value="sms" Id="invalid-sms" aria-invalid="true" />
<Label for="invalid-sms" Class="font-normal text-destructive">SMS only</Label>
</div>
<div class="flex items-center gap-3" data-invalid>
<RadioGroupItem Value="both" Id="invalid-both" aria-invalid="true" />
<Label for="invalid-both" Class="font-normal text-destructive">Both Email & SMS</Label>
</div>
</RadioGroup>
</div>