Radio Group

An accessible single-select group with roving tabindex and full keyboard support.

Basic Radio Group

Click a radio or use Up / Down arrow keys (Left / Right when horizontal) to navigate and select. Disabled radios are skipped. aria-checked, role="radiogroup", and role="radio" are wired automatically.

Small Medium Large

<BitBhRadioGroup DefaultValue="medium" class="radio-group">
    <label class="radio-label">
        <BitBhRadio Value="small" class="radio">
            <Template Context="r">
                @if (r.IsChecked) { <span class="radio-dot"></span> }
            </Template>
        </BitBhRadio>
        <span>Small</span>
    </label>
    <label class="radio-label">
        <BitBhRadio Value="medium" class="radio">
            <Template Context="r">
                @if (r.IsChecked) { <span class="radio-dot"></span> }
            </Template>
        </BitBhRadio>
        <span>Medium</span>
    </label>
    <label class="radio-label">
        <BitBhRadio Value="large" class="radio">
            <Template Context="r">
                @if (r.IsChecked) { <span class="radio-dot"></span> }
            </Template>
        </BitBhRadio>
        <span>Large</span>
    </label>
</BitBhRadioGroup>

/* All styles are consumer-authored — the library ships zero CSS */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.radio-group[data-orientation="horizontal"] {
    flex-direction: row;
    gap: 1.25rem;
}

.radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
}

.radio {
    /* Reset native button */
    all: unset;
    box-sizing: border-box;

    /* Outer ring */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid #d4d4d8;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: border-color 120ms ease;
    flex-shrink: 0;
}

.radio:hover         { border-color: #a1a1af; }
.radio:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Hooks emitted by BitBhRadio */
.radio[data-state="checked"] { border-color: #2563eb; }
.radio[data-disabled]        { opacity: 0.5; cursor: not-allowed; }

/* Inner dot */
.radio-dot {
    width: 0.55rem;
    height: 0.55rem;
    background: #2563eb;
    border-radius: 999px;
}

Horizontal Orientation

Set Vertical="false" to lay radios out horizontally. Arrow-key navigation switches to Left / Right and the group emits data-orientation="horizontal" for CSS hooks.

Card Bank PayPal

<BitBhRadioGroup Vertical="false" DefaultValue="card" class="radio-group">
    <label class="radio-label">
        <BitBhRadio Value="card" class="radio">
            <Template Context="r">
                @if (r.IsChecked) { <span class="radio-dot"></span> }
            </Template>
        </BitBhRadio>
        <span>Card</span>
    </label>
    <label class="radio-label">
        <BitBhRadio Value="bank" class="radio">
            <Template Context="r">
                @if (r.IsChecked) { <span class="radio-dot"></span> }
            </Template>
        </BitBhRadio>
        <span>Bank</span>
    </label>
    <label class="radio-label">
        <BitBhRadio Value="paypal" class="radio">
            <Template Context="r">
                @if (r.IsChecked) { <span class="radio-dot"></span> }
            </Template>
        </BitBhRadio>
        <span>PayPal</span>
    </label>
</BitBhRadioGroup>

/* All styles are consumer-authored — the library ships zero CSS */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* The group emits data-orientation="horizontal" when Vertical="false" */
.radio-group[data-orientation="horizontal"] {
    flex-direction: row;
    gap: 1.25rem;
}

.radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
}

.radio {
    /* Reset native button */
    all: unset;
    box-sizing: border-box;

    /* Outer ring */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid #d4d4d8;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: border-color 120ms ease;
    flex-shrink: 0;
}

.radio:hover         { border-color: #a1a1af; }
.radio:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Hooks emitted by BitBhRadio */
.radio[data-state="checked"] { border-color: #2563eb; }
.radio[data-disabled]        { opacity: 0.5; cursor: not-allowed; }

/* Inner dot */
.radio-dot {
    width: 0.55rem;
    height: 0.55rem;
    background: #2563eb;
    border-radius: 999px;
}

Disabled Radio

Set Disabled="true" on individual radios. Arrow-key navigation skips disabled options. Set Disabled="true" on the root group to disable everything at once.

Standard shipping (3–5 days) Express shipping (1–2 days) Same-day shipping (unavailable in your region)

<BitBhRadioGroup DefaultValue="standard" class="radio-group">
    <label class="radio-label">
        <BitBhRadio Value="standard" class="radio">
            <Template Context="r">
                @if (r.IsChecked) { <span class="radio-dot"></span> }
            </Template>
        </BitBhRadio>
        <span>Standard shipping (3–5 days)</span>
    </label>
    <label class="radio-label">
        <BitBhRadio Value="express" class="radio">
            <Template Context="r">
                @if (r.IsChecked) { <span class="radio-dot"></span> }
            </Template>
        </BitBhRadio>
        <span>Express shipping (1–2 days)</span>
    </label>
    <label class="radio-label">
        <BitBhRadio Value="same-day" Disabled="true" class="radio">
            <Template Context="r">
                @if (r.IsChecked) { <span class="radio-dot"></span> }
            </Template>
        </BitBhRadio>
        <span>Same-day shipping (unavailable in your region)</span>
    </label>
</BitBhRadioGroup>

/* All styles are consumer-authored — the library ships zero CSS */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.radio-group[data-orientation="horizontal"] {
    flex-direction: row;
    gap: 1.25rem;
}

.radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
}

.radio {
    /* Reset native button */
    all: unset;
    box-sizing: border-box;

    /* Outer ring */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid #d4d4d8;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: border-color 120ms ease;
    flex-shrink: 0;
}

.radio:hover         { border-color: #a1a1af; }
.radio:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Hooks emitted by BitBhRadio */
.radio[data-state="checked"] { border-color: #2563eb; }

/* Hooks emitted when Disabled="true" on a radio (or the root group).
   Arrow-key navigation skips disabled radios automatically. */
.radio[data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Inner dot */
.radio-dot {
    width: 0.55rem;
    height: 0.55rem;
    background: #2563eb;
    border-radius: 999px;
}

Card-style options

Because the radio is the only interactive element, you can place rich content (titles, descriptions, prices) inside the <label> wrapper and use the data-state="checked" hook to highlight the selected card.

Free Up to 3 projects.

Pro — $9 / mo Unlimited projects, priority support.

Team — $29 / mo For groups, with shared workspaces.

<BitBhRadioGroup DefaultValue="pro" class="plan-group">
    <label class="plan-card">
        <BitBhRadio Value="free" class="radio">
            <Template Context="r">
                @if (r.IsChecked) { <span class="radio-dot"></span> }
            </Template>
        </BitBhRadio>
        <div class="plan-info">
            <strong>Free</strong>
            <span>Up to 3 projects.</span>
        </div>
    </label>
    <label class="plan-card">
        <BitBhRadio Value="pro" class="radio">
            <Template Context="r">
                @if (r.IsChecked) { <span class="radio-dot"></span> }
            </Template>
        </BitBhRadio>
        <div class="plan-info">
            <strong>Pro — $9 / mo</strong>
            <span>Unlimited projects, priority support.</span>
        </div>
    </label>
    <label class="plan-card">
        <BitBhRadio Value="team" class="radio">
            <Template Context="r">
                @if (r.IsChecked) { <span class="radio-dot"></span> }
            </Template>
        </BitBhRadio>
        <div class="plan-info">
            <strong>Team — $29 / mo</strong>
            <span>For groups, with shared workspaces.</span>
        </div>
    </label>
</BitBhRadioGroup>

/* All styles are consumer-authored — the library ships zero CSS */
.radio {
    /* Reset native button */
    all: unset;
    box-sizing: border-box;

    /* Outer ring */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid #d4d4d8;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: border-color 120ms ease;
    flex-shrink: 0;
}

.radio:hover         { border-color: #a1a1af; }
.radio:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Hooks emitted by BitBhRadio */
.radio[data-state="checked"] { border-color: #2563eb; }
.radio[data-disabled]        { opacity: 0.5; cursor: not-allowed; }

/* Inner dot */
.radio-dot {
    width: 0.55rem;
    height: 0.55rem;
    background: #2563eb;
    border-radius: 999px;
}

/* Card-style group: each label is the styled selectable surface,
   driven by the data-state attribute on the inner radio. */
.plan-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.plan-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.plan-card:has(.radio[data-state="checked"]) {
    border-color: #2563eb;
    background: #eff6ff;
}

.plan-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.plan-info strong { font-size: 0.95rem; color: #18181b; }
.plan-info span   { font-size: 0.8rem; color: #52525b; }

Controlled

Drive selection externally with Value and OnValueChange.

Selected: green

Red Green Blue

<div style="display:flex; flex-direction:column; gap:1rem; width:100%">
    <div class="demo-row">
        <BitBhButton OnClick='() => selectedColor = "red"' class="btn">Red</BitBhButton>
        <BitBhButton OnClick='() => selectedColor = "green"' class="btn">Green</BitBhButton>
        <BitBhButton OnClick='() => selectedColor = "blue"' class="btn">Blue</BitBhButton>
        <span class="demo-output">Selected: <strong>@(selectedColor ?? "(none)")</strong></span>
    </div>

    <BitBhRadioGroup Value="@selectedColor"
                 OnValueChange="v => selectedColor = v"
                 class="radio-group">
        <label class="radio-label">
            <BitBhRadio Value="red" class="radio">
                <Template Context="r">
                    @if (r.IsChecked) { <span class="radio-dot"></span> }
                </Template>
            </BitBhRadio>
            <span>Red</span>
        </label>
        <label class="radio-label">
            <BitBhRadio Value="green" class="radio">
                <Template Context="r">
                    @if (r.IsChecked) { <span class="radio-dot"></span> }
                </Template>
            </BitBhRadio>
            <span>Green</span>
        </label>
        <label class="radio-label">
            <BitBhRadio Value="blue" class="radio">
                <Template Context="r">
                    @if (r.IsChecked) { <span class="radio-dot"></span> }
                </Template>
            </BitBhRadio>
            <span>Blue</span>
        </label>
    </BitBhRadioGroup>
</div>

@code {
    private string? selectedColor = "green";
}

/* All styles are consumer-authored — the library ships zero CSS */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.radio-group[data-orientation="horizontal"] {
    flex-direction: row;
    gap: 1.25rem;
}

.radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
}

.radio {
    /* Reset native button */
    all: unset;
    box-sizing: border-box;

    /* Outer ring */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid #d4d4d8;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: border-color 120ms ease;
    flex-shrink: 0;
}

.radio:hover         { border-color: #a1a1af; }
.radio:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Hooks emitted by BitBhRadio */
.radio[data-state="checked"] { border-color: #2563eb; }
.radio[data-disabled]        { opacity: 0.5; cursor: not-allowed; }

/* Inner dot */
.radio-dot {
    width: 0.55rem;
    height: 0.55rem;
    background: #2563eb;
    border-radius: 999px;
}

/* Controlled mode adds no new CSS hooks — data-state simply reflects
   whatever Value you bind to. Below are the external trigger controls. */
.demo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.demo-output { font-size: 0.875rem; color: #71717a; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}
.btn:hover { background: #f4f4f5; }

Form Submission

Set Name on the group to render a hidden <input> carrying the selected value, so plain HTML form posts include the group's selection.

<form @onsubmit="HandleFormSubmit"
      @onsubmit:preventDefault="true"
      style="display:flex; flex-direction:column; gap:0.75rem; align-items:flex-start;">
    <BitBhRadioGroup Name="size" DefaultValue="m" class="radio-group">
        <label class="radio-label">
            <BitBhRadio Value="s" class="radio">
                <Template Context="r">
                    @if (r.IsChecked) { <span class="radio-dot"></span> }
                </Template>
            </BitBhRadio>
            <span>Small</span>
        </label>
        <label class="radio-label">
            <BitBhRadio Value="m" class="radio">
                <Template Context="r">
                    @if (r.IsChecked) { <span class="radio-dot"></span> }
                </Template>
            </BitBhRadio>
            <span>Medium</span>
        </label>
        <label class="radio-label">
            <BitBhRadio Value="l" class="radio">
                <Template Context="r">
                    @if (r.IsChecked) { <span class="radio-dot"></span> }
                </Template>
            </BitBhRadio>
            <span>Large</span>
        </label>
    </BitBhRadioGroup>

    <button type="submit" class="btn btn-primary">Submit</button>

    @if (lastSubmitted is not null)
    {
        <span class="demo-output">@lastSubmitted</span>
    }
</form>

@code {
    private string? lastSubmitted;

    private void HandleFormSubmit()
    {
        lastSubmitted = "(submitted — the form posts size=<selected value>)";
    }
}

@* The group renders a single hidden input — posts:  size=<selected value> *@

/* All styles are consumer-authored — the library ships zero CSS */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.radio-group[data-orientation="horizontal"] {
    flex-direction: row;
    gap: 1.25rem;
}

.radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
}

.radio {
    /* Reset native button */
    all: unset;
    box-sizing: border-box;

    /* Outer ring */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border: 1px solid #d4d4d8;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    transition: border-color 120ms ease;
    flex-shrink: 0;
}

.radio:hover         { border-color: #a1a1af; }
.radio:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Hooks emitted by BitBhRadio */
.radio[data-state="checked"] { border-color: #2563eb; }
.radio[data-disabled]        { opacity: 0.5; cursor: not-allowed; }

/* Inner dot */
.radio-dot {
    width: 0.55rem;
    height: 0.55rem;
    background: #2563eb;
    border-radius: 999px;
}

/* When Name is set BitBhRadioGroup renders an <input type="hidden"> sibling
   with the current value — no additional CSS is needed for that. */
.demo-output { font-size: 0.875rem; color: #71717a; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}
.btn:hover { background: #f4f4f5; }

.btn-primary {
    color: #fff;
    background: #2563eb;
    border-color: #2563eb;
}
.btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}