home Docs Components Samples

Radio

Radio and RadioCard options for single selection within a RadioGroup.

Installation

Add the Radio component using the CLI:

shadcnblazor component add radio

Usage

The Radio component provides single selection within a RadioGroup. Place Radio options inside a RadioGroup and bind Value for the selected option. Each Radio needs a unique Value and ChildContent for the label.

Selected: option1

1
2
3
4
5
6
7
8
9
10
<RadioGroup @bind-Value="_selected">
    <Radio Value="option1">Option 1</Radio>
    <Radio Value="option2">Option 2</Radio>
    <Radio Value="option3">Option 3</Radio>
</RadioGroup>
<p class="text-sm text-muted-foreground mt-2">Selected: @_selected</p>

@code {
    private string? _selected = "option1";
}

Examples

Grouping

Use a container with multiple Radio components. Bind each via Checked and CheckedChanged to a shared value in the parent. When one is selected, set the value; when unchecked, clear it. No separate group component—the layout and parent state define the group.

Selected: email

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="flex flex-col gap-2">
    <Radio Checked="@(_selected == "all")" CheckedChanged="@(v => SelectIf(v, "all"))">All notifications</Radio>
    <Radio Checked="@(_selected == "email")" CheckedChanged="@(v => SelectIf(v, "email"))">Email only</Radio>
    <Radio Checked="@(_selected == "none")" CheckedChanged="@(v => SelectIf(v, "none"))">No notifications</Radio>
</div>
<p class="text-sm text-muted-foreground mt-2">Selected: @_selected</p>

@code {
    private string? _selected = "email";

    private void SelectIf(bool checked_, string value)
    {
        if (checked_)
            _selected = value;
        else
            _selected = null;
    }
}

Horizontal

Set Vertical="false" on RadioGroup to display options horizontally.

Selected: b

1
2
3
4
5
6
7
8
9
10
<RadioGroup @bind-Value="_choice" Vertical="false">
    <Radio Value="a">Option A</Radio>
    <Radio Value="b">Option B</Radio>
    <Radio Value="c">Option C</Radio>
</RadioGroup>
<p class="text-sm text-muted-foreground mt-2">Selected: @_choice</p>

@code {
    private string? _choice = "b";
}

Alignment

Use the Alignment parameter to control how the radio aligns with its label when the label wraps to multiple lines. Options are VerticalAlignment.Top, VerticalAlignment.Center (default), and VerticalAlignment.Bottom.

Top

Center (default)

Bottom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="flex flex-col gap-6">
    <div>
        <p class="text-sm font-medium text-muted-foreground mb-2">Top</p>
        <RadioGroup @bind-Value="_top">
            <Radio Value="a" Alignment="VerticalAlignment.Top">
                This is a longer label that wraps to multiple lines so you can see how the radio aligns to the top of the text block.
            </Radio>
        </RadioGroup>
    </div>
    <div>
        <p class="text-sm font-medium text-muted-foreground mb-2">Center (default)</p>
        <RadioGroup @bind-Value="_center">
            <Radio Value="b" Alignment="VerticalAlignment.Center">
                This is a longer label that wraps to multiple lines so you can see how the radio aligns to the center of the text block.
            </Radio>
        </RadioGroup>
    </div>
    <div>
        <p class="text-sm font-medium text-muted-foreground mb-2">Bottom</p>
        <RadioGroup @bind-Value="_bottom">
            <Radio Value="c" Alignment="VerticalAlignment.Bottom">
                This is a longer label that wraps to multiple lines so you can see how the radio aligns to the bottom of the text block.
            </Radio>
        </RadioGroup>
    </div>
</div>

@code {
    private string? _top = "a";
    private string? _center = "b";
    private string? _bottom = "c";
}

Alignment with label and description

Use Alignment="VerticalAlignment.Top" when you have a main label with a description underneath. The radio aligns with the top of the label so it stays visually anchored to the primary text.

1
2
3
4
5
6
7
8
9
10
11
12
<RadioGroup @bind-Value="_selected">
    <Radio Value="terms" Alignment="VerticalAlignment.Top">
        <div>
            <span class="font-semibold">Accept terms and conditions</span>
            <p class="text-sm text-muted-foreground mt-1">By selecting this option, you agree to the terms and conditions.</p>
        </div>
    </Radio>
</RadioGroup>

@code {
    private string? _selected = "terms";
}

Disabled

Use the Disabled parameter on a Radio to prevent selecting it, or set Disabled on RadioGroup to disable all options.

Selected: yes

1
2
3
4
5
6
7
8
9
<RadioGroup @bind-Value="_choice">
    <Radio Value="yes">Yes, enable notifications</Radio>
    <Radio Value="no" Disabled="true">No, keep them off</Radio>
</RadioGroup>
<p class="text-sm text-muted-foreground mt-2">Selected: @_choice</p>

@code {
    private string? _choice = "yes";
}

Invalid state

Set Invalid="true" to show the invalid state. The radio gets a red border and ring, and the label text turns red. Use this when validation fails (e.g. a required selection that must be made before submit).

1
2
3
4
5
6
7
<RadioGroup @bind-Value="_selected">
    <Radio Value="accept" Invalid="true">Accept terms and conditions</Radio>
</RadioGroup>

@code {
    private string? _selected;
}

API Reference

Radio

Radio option for single selection within a RadioGroup.

Properties

Name Type Description
AdditionalAttributes Dictionary<string, Object>
Alignment VerticalAlignment Vertical alignment of the radio relative to its label.
ButtonClass string CSS classes for the radio button element.
Checked bool
CheckedChanged EventCallback<bool>
ChildContent RenderFragment Content displayed next to the radio (alternative to LabelContent).
Class string
Disabled bool
Invalid bool Whether the radio is in an invalid state. When true, sets aria-invalid="true" and applies invalid styling.
LabelContent RenderFragment Optional label content displayed next to the radio.
Size Size
Value string

Events

Name Type Description
CheckedChanged EventCallback<bool>

Methods

Method Returns Description
Equals bool
GetHashCode int
GetType Type
SetParametersAsync Task
ToString string
Mobile support for API reference coming soon.

Loading...

An unhandled error has occurred. Reload 🗙