Radio Group

Overview

Radio Group is a two-part composite over the Navius RadioGroup primitive (role="radiogroup", roving tabindex, arrow-key navigation). ZitsRadioGroup renders NaviusRadioGroup, and ZitsRadioGroupItem renders NaviusRadioGroupItem wrapping a NaviusRadioGroupIndicator with a fixed filled-circle icon shown only when the item is checked. ZitsRadioGroup forwards Value to NaviusRadioGroup only when the consumer explicitly set it, so the uncontrolled DefaultValue path stays live.

Install

navius add radio-group --to ./src/MyApp --namespace MyApp.Ui

Usage

<ZitsRadioGroup @bind-Value="_value">
    <div class="flex items-center gap-3">
        <ZitsRadioGroupItem Value="comfortable" id="rg-comfortable" />
        <ZitsLabel for="rg-comfortable">Comfortable</ZitsLabel>
    </div>
</ZitsRadioGroup>

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

Parts and props

None of the two parts add a prop beyond what the composed Navius primitives already expose. ZitsRadioGroup forwards ValueChanged, DefaultValue, Disabled, Required, Name, Orientation, Loop, Dir, and Attributes to NaviusRadioGroup, plus Value conditionally (only when set by the caller, controlled usage). ZitsRadioGroupItem forwards Value, Disabled, Required, ReadOnly, and Attributes to NaviusRadioGroupItem.

Styling surface

Both parts accept class/Attributes, merged via Cn.Merge with the caller’s classes applied last. There are no variant/size parameters.

Data attribute hooks

Radio Group relies on the composed primitives’ own checked/disabled state (surfaced as native aria-checked/aria-disabled and CSS disabled:/aria-invalid: selectors on the styled item), not a bespoke data-* hook of its own.