navius

Components / Radio Group

Radio Group

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

razor
<NaviusRadioGroup @bind-Value="_value" Orientation="vertical"
                 class="grid gap-3">
    <div class="flex items-center gap-3">
        <NaviusRadioGroupItem Value="comfortable" id="r1"
                              class="... data-[checked]:border-primary">
            <NaviusRadioGroupIndicator class="block h-2.5 w-2.5 rounded-full bg-primary" />
        </NaviusRadioGroupItem>
        <label for="r1">Comfortable</label>
    </div>
</NaviusRadioGroup>

@code { private string? _value = "comfortable"; }

Features

  • Full keyboard navigation with roving tabindex; only the checked radio is in the Tab order.
  • Arrow keys move focus and selection together (automatic activation), with Home/End jumping to the first/last enabled radio.
  • Can be controlled (@bind-Value) or uncontrolled (DefaultValue).
  • Optional arrow Loop and RTL-aware (Dir) horizontal navigation.
  • Renders a hidden input per item so it participates in native form submission and validation.

Installation

Install the brain, or copy just this primitive in with the CLI.

Terminal bash
navius add radio-group

Anatomy

Import the parts and assemble them.

razor
@using Navius.Primitives.Components.RadioGroup

<NaviusRadioGroup>
    <NaviusRadioGroupItem>
        <NaviusRadioGroupIndicator />
    </NaviusRadioGroupItem>
</NaviusRadioGroup>

API Reference

Root

Contains all the radio items. Renders a div with role=radiogroup.

Prop Type Default
Value string? -
ValueChanged EventCallback<string?> -
DefaultValue string? -
Disabled bool false
Required bool false
Name string? -
Orientation string? -
Loop bool true
Dir string? -

Data attributes

Data attribute Values
[data-orientation] "horizontal" | "vertical" (when set)
[data-disabled] Present when disabled

Item

An item in the group that can be checked. Renders a button with role=radio.

Prop Type Default
Value string ""
Disabled bool false
Required bool false
ChildContent RenderFragment? -

Data attributes

Data attribute Values
[data-checked] Present when checked
[data-unchecked] Present when unchecked
[data-disabled] Present when disabled

Indicator

Renders when its item is checked. Renders a span. You can style it as the radio dot.

Prop Type Default
KeepMounted bool false
ChildContent RenderFragment? -

Data attributes

Data attribute Values
[data-checked] Present when checked
[data-unchecked] Present when unchecked
[data-disabled] Present when disabled

Accessibility

Adheres to the radio group WAI-ARIA design pattern and uses roving tabindex to manage focus among the radio items.

Keyboard interactions

Key Description
Tab Moves focus to the checked radio item, or the first enabled item when none is checked.
Space Checks the focused radio item if it is not already checked.
ArrowDown Moves focus and checks the next enabled radio item.
ArrowRight Moves focus and checks the next enabled radio item (mirrored under rtl).
ArrowUp Moves focus and checks the previous enabled radio item.
ArrowLeft Moves focus and checks the previous enabled radio item (mirrored under rtl).
Home Moves focus and checks the first enabled radio item.
End Moves focus and checks the last enabled radio item.