Radio - Fod.DemoPage

Quick Start

Basic radio group usage with labels and descriptions.

Basic radio group

Select a fruit

Apple

Banana

Orange

Selected: None

With descriptions

Select a plan

BasicFree tier with limited features

Pro$9.99/month with all features

EnterpriseCustom pricing for large teams

razor

<FodRadioGroup @bind-Value="_selectedFruit" Label="Select a fruit">
    <FodRadio Value="@("apple")" Label="Apple" />
    <FodRadio Value="@("banana")" Label="Banana" />
    <FodRadio Value="@("orange")" Label="Orange" />
</FodRadioGroup>

<FodRadioGroup @bind-Value="_selectedPlan" Label="Select a plan">
    <FodRadio Value="@("basic")" Label="Basic" Description="Free tier" />
    <FodRadio Value="@("pro")" Label="Pro" Description="$9.99/month" />
</FodRadioGroup>

Sizes

Radio buttons come in two sizes to fit different contexts.

Small (16px)

Small option 1

Small option 2

Medium (20px) - Default

Medium option 1

Medium option 2

razor

<FodRadioGroup @bind-Value="_value" RadioSize="RadioSize.Small">
    <FodRadio Value="@("option1")" Label="Small option 1" />
    <FodRadio Value="@("option2")" Label="Small option 2" />
</FodRadioGroup>

<FodRadioGroup @bind-Value="_value" RadioSize="RadioSize.Medium">
    <FodRadio Value="@("option1")" Label="Medium option 1" />
    <FodRadio Value="@("option2")" Label="Medium option 2" />
</FodRadioGroup>

Orientation

Radio groups can be arranged vertically (default) or horizontally.

Vertical (default)

Select option

Option A

Option B

Option C

Horizontal

Select option

Option A

Option B

Option C

razor

<FodRadioGroup @bind-Value="_value" Orientation="Orientation.Vertical" Label="Select option">
    <FodRadio Value="@("a")" Label="Option A" />
    <FodRadio Value="@("b")" Label="Option B" />
    <FodRadio Value="@("c")" Label="Option C" />
</FodRadioGroup>

<FodRadioGroup @bind-Value="_value" Orientation="Orientation.Horizontal" Label="Select option">
    <FodRadio Value="@("a")" Label="Option A" />
    <FodRadio Value="@("b")" Label="Option B" />
    <FodRadio Value="@("c")" Label="Option C" />
</FodRadioGroup>

States

Radio buttons and groups support various states including disabled and error.

Default states

Select option

Unselected

Selected

Disabled group

Disabled option 1

Disabled option 2

Individual disabled

Mixed disabled

Enabled option

Disabled option

Error state

Required selection

Option 1

Option 2

Please select an option

razor

<FodRadioGroup @bind-Value="_value" Disabled="true" Label="Disabled group">
    <FodRadio Value="@("option1")" Label="Disabled option 1" />
    <FodRadio Value="@("option2")" Label="Disabled option 2" />
</FodRadioGroup>

<FodRadioGroup @bind-Value="_value" Error="true" ErrorText="Please select an option">
    <FodRadio Value="@("option1")" Label="Option 1" />
    <FodRadio Value="@("option2")" Label="Option 2" />
</FodRadioGroup>

Forms Integration

Radio groups integrate seamlessly with Blazor forms and validation.

Form with validation

razor

<EditForm Model="@_form" OnSubmit="HandleSubmit">
    <FodRadioGroup @bind-Value="_form.ShippingMethod"
                   Required="true"
                   Error="@_hasError"
                   ErrorText="@_errorMessage"
                   Label="Shipping method">
        <FodRadio Value="@("standard")" Label="Standard" Description="5-7 days" />
        <FodRadio Value="@("express")" Label="Express" Description="2-3 days" />
    </FodRadioGroup>
    <FodButton HtmlType="submit">Submit</FodButton>
</EditForm>

Generic Type Support

Radio groups work with any type, including integers and enums for type-safe selections.

Integer values

Select quantity

One

Two

Three

Five

Selected: 0

Enum values

Select priority

LowNon-urgent tasks

MediumNormal priority

HighUrgent tasks

CriticalImmediate attention

Selected: None

razor

@* Integer values *@
<FodRadioGroup @bind-Value="_selectedNumber" Label="Select quantity">
    <FodRadio Value="1" Label="One" />
    <FodRadio Value="2" Label="Two" />
    <FodRadio Value="3" Label="Three" />
</FodRadioGroup>

@* Enum values *@
<FodRadioGroup @bind-Value="_selectedPriority" Label="Select priority">
    <FodRadio Value="@((Priority?)Priority.Low)" Label="Low" />
    <FodRadio Value="@((Priority?)Priority.Medium)" Label="Medium" />
    <FodRadio Value="@((Priority?)Priority.High)" Label="High" />
</FodRadioGroup>

RTL Support (Right-to-Left)

Radio groups support RTL languages with automatic layout mirroring.

בחר אפשרות

אפשרות 1תיאור לאפשרות הראשונה

אפשרות 2תיאור לאפשרות השנייה

אפשרות 3תיאור לאפשרות השלישית

razor

<div dir="rtl">
    <FodRadioGroup @bind-Value="_rtlValue" Label="בחר אפשרות">
        <FodRadio Value="@("option1")" Label="אפשרות 1" Description="תיאור" />
        <FodRadio Value="@("option2")" Label="אפשרות 2" Description="תיאור" />
        <FodRadio Value="@("option3")" Label="אפשרות 3" Description="תיאור" />
    </FodRadioGroup>
</div>

Accessibility & Best Practices

Radio buttons are built with accessibility in mind.

Native <input type="radio"> is used for full screen reader support.
Radio group uses role="radiogroup" for proper semantic structure.
Labels are always associated with inputs via wrapping <label> element.
aria-invalid is set on the group when validation errors occur.
aria-describedby links error messages for screen readers.
aria-checked indicates the selection state for each radio.
All radios in a group share the same name attribute for keyboard navigation.
Arrow keys navigate between options, Space/Enter selects.
Touch targets are at least 44x44px for mobile accessibility.

API Reference - FodRadioGroup

Complete API reference for the FodRadioGroup component.

No properties defined.

API Reference - FodRadio

Complete API reference for the FodRadio component.

No properties defined.