Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Basic Example

A basic radio group with simple labels. The `RadioGroupItem` component automatically includes an indicator, so you only need to provide the label content. Since this is a form component, it must be placed within an `EditForm` and bound to a model property using the `For` parameter.

Source

<EditForm Model="@_model">
    <RzRadioGroup For="@(() => _model.LayoutPreference)" DisplayName="Layout Preference">
        <RadioGroupItem TValue="string" Value="@("default")">
            <span class="text-sm font-medium">Default</span>
        </RadioGroupItem>
        <RadioGroupItem TValue="string" Value="@("comfortable")">
            <span class="text-sm font-medium">Comfortable</span>
        </RadioGroupItem>
        <RadioGroupItem TValue="string" Value="@("compact")">
            <span class="text-sm font-medium">Compact</span>
        </RadioGroupItem>
    </RzRadioGroup>
</EditForm>

@code {
    private class DemoModel
    {
        public string? LayoutPreference { get; set; } = "comfortable";
    }

    private DemoModel _model = new();
}

Choice Card Pattern

By composing `RadioGroupItem` with other components, you can create large, clickable "choice cards". The `RadioGroupItem`'s `ChildContent` contains the card structure, and the entire item is implicitly a label for its hidden radio input. The default indicator is still rendered automatically.

Source

<RzRadioGroup For="@(() => _model.SubscriptionPlan)" DisplayName="Subscription Plan">
    <RadioGroupItem TValue="string" Value="@("monthly")">
        <div class="bg-background relative flex w-full cursor-pointer items-start space-x-3 rounded-lg border p-4 shadow-sm transition-colors group-has-[.peer:checked]:border-primary hover:bg-accent">
            <div class="grid gap-1.5 leading-none">
                <span class="font-medium">Starter Plan</span>
                <p class="text-muted-foreground text-sm">
                    Perfect for individuals and small teams.
                </p>
            </div>
        </div>
    </RadioGroupItem>
    <RadioGroupItem TValue="string" Value="@("yearly")">
        <div class="bg-background relative flex w-full cursor-pointer items-start space-x-3 rounded-lg border p-4 shadow-sm transition-colors group-has-[.peer:checked]:border-primary hover:bg-accent">
            <div class="grid gap-1.5 leading-none">
                <span class="font-medium">Professional Plan</span>
                <p class="text-muted-foreground text-sm">
                    Advanced features for growing businesses.
                </p>
            </div>
        </div>
    </RadioGroupItem>
</RzRadioGroup>

Horizontal Layout

Set `Orientation="Orientation.Horizontal"` on the `RzRadioGroup` to arrange the items in a row.

Source

<RzRadioGroup For="@(() => _model.LayoutPreference)" DisplayName="Layout Preference" Orientation="Orientation.Horizontal">
    <RadioGroupItem TValue="string" Value="default">
        <span class="text-sm font-medium">Default</span>
    </RadioGroupItem>
    <RadioGroupItem TValue="string" Value="comfortable">
        <span class="text-sm font-medium">Comfortable</span>
    </RadioGroupItem>
    <RadioGroupItem TValue="string" Value="compact">
        <span class="text-sm font-medium">Compact</span>
    </RadioGroupItem>
</RzRadioGroup>

Disabled Items

Set the `Disabled` parameter on a `RadioGroupItem` to prevent it from being selected.

Source

<RzRadioGroup For="@(() => _model.LayoutPreference)" DisplayName="Layout Preference">
    <RadioGroupItem TValue="string" Value="default">
        <span class="text-sm font-medium">Default</span>
    </RadioGroupItem>
    <RadioGroupItem TValue="string" Value="comfortable">
        <span class="text-sm font-medium">Comfortable</span>
    </RadioGroupItem>
    <RadioGroupItem TValue="string" Value="compact" Disabled="true">
        <span class="text-sm font-medium">Compact (Coming Soon)</span>
    </RadioGroupItem>
</RzRadioGroup>

Hiding Indicators

Set `ShowIndicators="false"` on the `RzRadioGroup` to hide the radio dots for all items. This is useful for "choice card" patterns where the selection is indicated by a border or background change.

Source

<RzRadioGroup For="@(() => _model.SubscriptionPlan)" DisplayName="Subscription Plan" ShowIndicators="false">
    <RzFieldGroup>
        <RadioGroupItem TValue="string" Value="@("monthly")">
            <div class="bg-background flex w-full cursor-pointer items-start space-x-3 rounded-lg border p-4 shadow-sm transition-colors group-has-[.peer:checked]:border-primary hover:bg-accent">
                <div class="grid gap-1.5 leading-none">
                    <span class="font-medium">Starter Plan</span>
                    <p class="text-muted-foreground text-sm">
                        Perfect for individuals and small teams.
                    </p>
                </div>
            </div>
        </RadioGroupItem>
        <RadioGroupItem TValue="string" Value="@("yearly")">
            <div class="bg-background flex w-full cursor-pointer items-start space-x-3 rounded-lg border p-4 shadow-sm transition-colors group-has-[.peer:checked]:border-primary hover:bg-accent">
                <div class="grid gap-1.5 leading-none">
                    <span class="font-medium">Professional Plan</span>
                    <p class="text-muted-foreground text-sm">
                        Advanced features for growing businesses.
                    </p>
                </div>
            </div>
        </RadioGroupItem>
    </RzFieldGroup>
</RzRadioGroup>

Custom Indicator

You can provide custom content to the `RadioGroupItemIndicator` to replace the default dot. In this example, we use a checkmark icon.

Source

<RzRadioGroup For="@(() => _model.DeliverySpeed)" DisplayName="Delivery Speed">
    <RadioGroupItem TValue="string" Value="@("standard")">
        <RadioGroupItemIndicator>
            <Blazicon Svg="MdiIcon.Check" class="size-3.5 fill-current text-primary" />
        </RadioGroupItemIndicator>
        <span class="text-sm font-medium">Standard</span>
    </RadioGroupItem>
    <RadioGroupItem TValue="string" Value="@("express")">
        <RadioGroupItemIndicator>
            <Blazicon Svg="MdiIcon.Check" class="size-3.5 fill-current text-primary" />
        </RadioGroupItemIndicator>
        <span class="text-sm font-medium">Express</span>
    </RadioGroupItem>
</RzRadioGroup>

Component Parameters

The following tables summarize the main parameters for the Radio Group components.

RzRadioGroup

Property	Type	Default	Description
`For`	`Expression<Func<TValue>>`	Required	An expression that identifies the bound value.
`Value`	`TValue?`	`default`	The currently selected value of the radio group.
`ChildContent`	`RenderFragment`	`null`	The content of the radio group, which should be a series of `RadioGroupItem` components.
`DisplayName`	`string?`	`null`	An accessible name for the fieldset, rendered as a screen-reader-only `<legend>`.
`ShowIndicators`	`bool`	`true`	If false, all indicators within the group will be hidden.

RadioGroupItem

Property	Type	Default	Description
`Value`	`TValue?`	`default`	The value associated with this radio item.
`Disabled`	`bool`	`false`	If true, the item cannot be selected.
`Id`	`string`	Auto-generated	The unique identifier for the radio item's label.
`ChildContent`	`RenderFragment`	`null`	The visible content of the label for this radio item.

RadioGroupItemIndicator

Property	Type	Default	Description
`ChildContent`	`RenderFragment?`	`null`	Custom content to display as the indicator when checked. If null, a default dot is rendered.