Components / Radio Group

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. role="radiogroup" with roving tabindex and arrow-key navigation. The behaviour comes from the brain; this preview is the real component running in WebAssembly.

Examples

Selected: comfortable

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

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

Installation

Terminal bash
navius add radio-group

API reference

ZitsRadioGroup

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

ZitsRadioGroupItem

Prop Type Default
Value string ""
Disabled bool false
Required bool false