Choice & selection

AppRadio

Pick exactly one of a few exclusive options, every choice visible at once.

<app-radio label="1 year" name="exp" value="1" />

A radio group asks the user to pick exactly one of a small set of options — an experience level, a plan, a shipping speed — with every choice on screen at once. Selecting one clears the rest, so the answer is always unambiguous.

Its look comes entirely from the shared @webority/theme, so the Razor <app-radio> and the React <AppRadio> render identically — a radio is a radio on every Webority surface.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the radio above it.

<app-radio label="Option A" name="playground" value="a" />

Exclusive choice

Radios that share a name form one group; picking any option deselects the others. Bind checked / onChange against a single value.

One value, all options visible
Every radio in the group carries the same name; the checked one matches the current value.
Show code 
<div class="wui-control-group">
    <app-radio label="No experience" name="exp" value="none" />
    <app-radio label="1 year" name="exp" value="1" checked="true" />
    <app-radio label="2+ years" name="exp" value="2" />
</div>
Group by a shared nameRadios only behave as one exclusive group when they share the same name. Give each group its own name — reuse a name across unrelated questions and picking an answer to one silently clears the other.

Validation

Show a hint for guidance and an error when validation fails, on any radio in the group. They share one slot below the control — the error replaces the hint, matching app-input.

Hint and error
Rounded to the nearest year.
Choose an experience level.
Show code 
<app-radio label="1 year" name="exp" value="1" hint="Rounded to the nearest year." />
<app-radio label="1 year" name="exp" value="1" error="Choose an experience level." />

When to use

Use it when

  • The user must pick exactly one of 2–5 mutually exclusive options.
  • The options are short labels worth comparing at a glance, all visible.
  • A single choice is mandatory before the form can be submitted.

Reach for something else when

  • There are more than about five options. → AppSelect
  • Each option needs a description or icon. → AppChoiceCard
  • The choices are independent on/off settings. → AppCheckbox
  • The user can pick several values. → AppMultiSelect

Best practices

Do
2–5 exclusive options, all on screen — the user compares every choice without opening anything.
Don't
Past about five options a radio list sprawls and is hard to scan — a dropdown holds it in one line.
Do
Radios enforce a single answer — exactly one can ever be selected.
Don't
Checkboxes let the user tick several — the wrong control for a single exclusive choice.

Every option

The whole surface of the component, one cell per value — every state, the validation slot, and the content edge cases a normal example doesn't show.

state

(default)
checked
disabled
disabled checked

validation

hint
Helper text
error
Required
hint + error (error wins)
Required

content

label omitted — bare control, no accessible name
long label — wraps inside the control group

Attributes

AttributeTypeDefaultDescription
labelstring—The clickable label beside the radio.
idstring—Explicit input id — binds the label's for to it. Declared property, matching React's id. Auto-generated + uniquified per radio when omitted.
asp-forModelExpression—Razor-only. Binds name, id, checked state and validation message from a Razor Pages model property.
name *string—Group name — radios sharing a name are mutually exclusive.
valuestring—Submitted value when this radio is selected.
checkedboolfalseRenders this option as the selection.
errorstring—Error message below the control. Turns aria-invalid true and replaces the hint.
hintstring—Helper text below the control. Hidden while an error is shown.
disabledboolfalseDisables this option. Declared property, matching React's disabled.