Forms

TwRadioButton

TwRadioButton is a Blazor radio button component. Bind SelectedValue, set Color, Disabled and Horizontal, or generate a group from Items.

Last updated 24 September 2026

Basic Usage

Group radio buttons with TwRadioGroup and bind values with @bind-SelectedValue.

Shipping method

Standard (3-5 days)

Express (1-2 days)

Overnight

Selected: standard

Razor

<TwRadioGroup T="string" Legend="Shipping method" Name="shipping">
    <TwRadioButton Value="@("standard")" Label="Standard (3-5 days)" @bind-SelectedValue="shipping" Color="Color.Success" />
    <TwRadioButton Value="@("express")" Label="Express (1-2 days)" @bind-SelectedValue="shipping" Color="Color.Success" />
    <TwRadioButton Value="@("overnight")" Label="Overnight" @bind-SelectedValue="shipping" Color="Color.Success" />
</TwRadioGroup>
<p class="mt-4 text-sm text-gray-600 dark:text-white">Selected: <strong>@shipping</strong></p>

CSHARP

@code {
    private string shipping = "standard";
}

Colors

TwRadioButton supports all the standard theme colors via the Color property.

Primary

Accent

Success

Danger

Warning

Info

Light

Dark

Razor

@foreach (Color c in ((Color[])Enum.GetValues(typeof(Color))))
{
    @if (c != Color.Light && c != Color.Dark)
    {
        <div class="block mt-2">
            <div class="p-3">
                <TwRadioButton Label="@c.ToString()" Value="true" Color="c" SelectedValue="true" />
            </div>
        </div>
    }
    else
    {
        <div class="block mt-2">
            <div class="@(c == Color.Light ? "bg-gray-900 p-3 rounded-lg" : "bg-white p-3 rounded-lg")">
                <TwRadioButton Label="@c.ToString()" Value="true" Color="c" LabelClass="@(c == Color.Light ? "text-white dark:text-white" : "text-gray-900 dark:text-gray-900")" AriaLabel="@($"{@c.ToString()} radio button")" SelectedValue="true" />
            </div>
        </div>
    }
}

Data-Driven (Automatic)

Use Items and @bind-Value to generate radio buttons from a list.

Select a size

Small

Medium

Large

Extra Large

Selected: medium

Rating: 3 / 5

Razor

<div class="mb-6">
    <TwRadioGroup Legend="Select a size"
                  Items="@sizeItems"
                  Name="auto-size"
                  @bind-Value="selectedSize"
                  ItemColor="Color.Primary" />
    <p class="mt-4 text-sm text-gray-600 dark:text-white">Selected: <strong>@selectedSize</strong></p>
</div>

<div>
    <TwRadioGroup Legend="Rate your experience"
                  Items="@ratingItems"
                  Name="rating"
                  @bind-Value="rating"
                  ItemColor="Color.Accent" />
    <p class="mt-4 text-sm text-gray-600 dark:text-white">Rating: <strong>@rating / 5</strong></p>
</div>

CSHARP

@code {
    private string selectedSize = "medium";
    private int rating = 3;
    
    private readonly List<RadioGroupItem<string>> sizeItems = new()
    {
        new() { Label = "Small", Value = "small" },
        new() { Label = "Medium", Value = "medium" },
        new() { Label = "Large", Value = "large" },
        new() { Label = "Extra Large", Value = "xl" }
    };
    
    private readonly List<RadioGroupItem<int>> ratingItems = new()
    {
        new() { Label = "⭐ Poor", Value = 1 },
        new() { Label = "⭐⭐ Fair", Value = 2 },
        new() { Label = "⭐⭐⭐ Good", Value = 3 },
        new() { Label = "⭐⭐⭐⭐ Great", Value = 4 },
        new() { Label = "⭐⭐⭐⭐⭐ Excellent", Value = 5 }
    };
}

Horizontal Layout & Custom Spacing

Use Horizontal to arrange buttons side-by-side, or Class="gap-4" for custom spacing.

Payment method

Credit Card

PayPal

Cryptocurrency

Selected: credit

Billing cycle

Monthly

Yearly (Save 20%)

Selected: monthly

Razor

<div class="mb-6">
    <TwRadioGroup Legend="Payment method"
                  Items="@paymentItems"
                  Name="payment"
                  @bind-Value="payment"
                  ItemColor="Color.Primary"
                  Horizontal />
    <p class="mt-4 text-sm text-gray-600 dark:text-white">Selected: <strong>@payment</strong></p>
</div>

<TwRadioGroup T="string" Legend="Billing cycle" Name="billing" Class="gap-6">
    <TwRadioButton Value="@("monthly")" Label="Monthly" @bind-SelectedValue="billing" Color="Color.Accent" />
    <TwRadioButton Value="@("yearly")" Label="Yearly (Save 20%)" @bind-SelectedValue="billing" Color="Color.Accent" />
</TwRadioGroup>
<p class="mt-4 text-gray-600 dark:text-white">Selected: <strong>@billing</strong></p>

CSHARP

@code {
    private string payment = "credit";
    private string billing = "monthly";
    
    private readonly List<RadioGroupItem<string>> paymentItems = new()
    {
        new() { Label = "Credit Card", Value = "credit" },
        new() { Label = "PayPal", Value = "paypal" },
        new() { Label = "Cryptocurrency", Value = "crypto" }
    };
}

Disabled State

Disable the entire group with the Disabled property.

Premium plan (Disabled)

Basic - £9/month

Pro - £29/month

Enterprise - £99/month

Razor

<TwRadioGroup T="string" Legend="Premium plan (Disabled)" Name="plan" Disabled>
    <TwRadioButton Value="@("basic")" Label="Basic - £9/month" SelectedValue="@("basic")" Color="Color.Accent" />
    <TwRadioButton Value="@("pro")" Label="Pro - £29/month" SelectedValue="@("basic")" Color="Color.Accent" />
    <TwRadioButton Value="@("enterprise")" Label="Enterprise - £99/month" SelectedValue="@("basic")" Color="Color.Accent" />
</TwRadioGroup>

Programmatic Control

Change the selection programmatically by updating the bound value.

Subscription plan

Free - £0/month

Basic - £9/month

Pro - £29/month

Enterprise - Contact us

Current plan: free

Razor

<TwRadioGroup Legend="Subscription plan"
              Items="@planItems"
              Name="dynamic-plan"
              @bind-Value="dynamicPlan"
              ItemColor="Color.Accent" />

<div class="flex gap-2 mt-4">
    <TwButton Label="Free" Color="Color.Primary" Variant="ButtonVariant.Outlined" OnClick="@(() => dynamicPlan = "free")" />
    <TwButton Label="Basic" Color="Color.Primary" Variant="ButtonVariant.Outlined" OnClick="@(() => dynamicPlan = "basic")" />
    <TwButton Label="Pro" Color="Color.Accent" Variant="ButtonVariant.Outlined" OnClick="@(() => dynamicPlan = "pro")" />
</div>

<p class="mt-4 text-sm text-gray-600 dark:text-white">Current plan: <strong>@dynamicPlan</strong></p>

CSHARP

@code {
    private string dynamicPlan = "free";
    
    private readonly List<RadioGroupItem<string>> planItems = new()
    {
        new() { Label = "Free - £0/month", Value = "free" },
        new() { Label = "Basic - £9/month", Value = "basic" },
        new() { Label = "Pro - £29/month", Value = "pro" },
        new() { Label = "Enterprise - Contact us", Value = "enterprise" }
    };
}

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwRadioButtonTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Base`	string
`Disabled`	string
`Hover`	string
`LabelBase`	string
`LabelInteractiveCursor`	string
`LabelNonInteractiveCursor`	string
`LabelDisabled`	string
`IconWrapper`	string

Global Theme Configuration

These reuse shared design tokens configured once on TwBlazorTheme, rather than being unique to this component.

Property	Type	Controls
`Colors`	TwBlazorPalette

Full reference: TwRadioButtonTheme on the API docs.