Radio Group

Overview

The MRadioGroup and MRadioButton components work together to provide accessible, single-choice selection. MRadioGroup manages shared state through a cascading context, automatically wiring the name attribute and selection tracking across all child MRadioButton items. Supports Blazor two-way binding via @bind-Value and integrates with EditForm for model validation.

Usage

Add the namespace import and include the stylesheet reference if not already done.

@using Marai.UI.Components.MRadioButton

Basic Usage

<MRadioGroup>
    <MRadioButton Value="option-a" Label="Option A" />
    <MRadioButton Value="option-b" Label="Option B" />
    <MRadioButton Value="option-c" Label="Option C" />
</MRadioGroup>

Examples

Default Selected Value

Pass a Value to pre-select an option on render.

<MRadioGroup Value="comfortable">
    <MRadioButton Value="default" Label="Default" />
    <MRadioButton Value="comfortable" Label="Comfortable" />
    <MRadioButton Value="compact" Label="Compact" />
</MRadioGroup>

Two-Way Binding

Use @bind-Value to keep local state in sync with the selection.

<div style="display:flex;flex-direction:column;gap:0.75rem;">
    <MRadioGroup @bind-Value="_theme">
        <MRadioButton Value="light" Label="Light" />
        <MRadioButton Value="dark" Label="Dark" />
        <MRadioButton Value="system" Label="System" />
    </MRadioGroup>
    <p class="text-sm text-muted-foreground">Selected: @_theme</p>
</div>

@code {
    private string _theme = "system";
}

Disabled Group

Set Disabled="true" on MRadioGroup to disable all items at once.

<MRadioGroup Value="option-b" Disabled="true">
    <MRadioButton Value="option-a" Label="Option A" />
    <MRadioButton Value="option-b" Label="Option B" />
    <MRadioButton Value="option-c" Label="Option C" />
</MRadioGroup>

Disabled Item

Set Disabled="true" on an individual MRadioButton to disable only that option.

<MRadioGroup Value="option-a">
    <MRadioButton Value="option-a" Label="Option A" />
    <MRadioButton Value="option-b" Label="Option B (unavailable)" Disabled="true" />
    <MRadioButton Value="option-c" Label="Option C" />
</MRadioGroup>

In a Form

Use @bind-Value inside an EditForm for model binding and validation.

<EditForm Model="_model" OnValidSubmit="HandleSubmit">
    <DataAnnotationsValidator />
    <MRadioGroup @bind-Value="_model.Plan">
        <MRadioButton Value="free" Label="Free" />
        <MRadioButton Value="pro" Label="Pro" />
        <MRadioButton Value="enterprise" Label="Enterprise" />
    </MRadioGroup>
    <ValidationMessage For="() => _model.Plan" />
    <MButton Type="submit" Class="mt-4">Continue</MButton>
</EditForm>

@code {
    private readonly PlanModel _model = new();

    private void HandleSubmit() { /* ... */ }
}

Customization

Custom Tailwind CSS Classes

Use Class on MRadioGroup to control layout and spacing between items, or on individual MRadioButton items for per-item overrides.

<MRadioGroup Class="gap-4">
    <MRadioButton Value="a" Label="Option A" Class="font-semibold" />
    <MRadioButton Value="b" Label="Option B" Class="font-semibold" />
    <MRadioButton Value="c" Label="Option C" Class="font-semibold" />
</MRadioGroup>

Standard HTML Attributes

Both MRadioGroup and MRadioButton forward arbitrary HTML attributes to their root elements. Use aria-label on the group for screen readers, and id on individual buttons for precise targeting.

<MRadioGroup aria-label="Notification preferences" aria-describedby="notif-hint">
    <MRadioButton Value="all" Label="All notifications" id="notif-all" />
    <MRadioButton Value="important" Label="Important only" id="notif-important" />
    <MRadioButton Value="none" Label="None" id="notif-none" />
</MRadioGroup>
<p id="notif-hint" class="text-sm text-muted-foreground">Choose how often you receive updates.</p>

To retheme the radio accent color, override CSS variables in your stylesheet:

:root {
    --primary: 222 84% 30%;
    --ring:    222 84% 30%;
}

Accessibility

• MRadioGroup renders a <div role="radiogroup"> — use aria-label or aria-labelledby to identify the group for screen readers
• The name attribute is auto-generated per group instance, so radio buttons are correctly grouped without manual wiring
• Each MRadioButton renders a <label> wrapping the input — clicking the label text activates the radio
• Disabled items use the disabled attribute and cursor-not-allowed styling
• Focus ring is applied via focus-visible:ring-2 for keyboard navigation visibility
• Arrow keys navigate between options natively — no JavaScript required

API Reference

MRadioGroup

MRadioButton

Styling Details

Default Styling

The group renders a vertical flex column and each item uses a label wrapper for click area coverage:

• Group: flex flex-col gap-3 — vertical stack with 12px between items
• Item wrapper: flex items-center gap-3 — horizontally aligns input and label with 12px gap
• Input: h-4 w-4 rounded-full — 16px circle with native checked styling via accent-primary
• Label text: text-sm font-medium leading-none — compact, readable label
• Focus: focus-visible:ring-2 focus-visible:ring-ring — keyboard focus ring
• Disabled: disabled:cursor-not-allowed disabled:opacity-50 on input, peer-disabled:opacity-70 on label