ComponentsInputs and forms
Radio
A group of mutually exclusive options, all visible at once. Use radios when there are two to five options and comparing them matters; use a select for longer lists.
A group with one choice
Bind Value on MudRadioGroup; each MudRadio carries the value it stands for. Arrow keys move the choice within the group.
Crust
Classic crust, coming up.
| Size ↓ · Color → | Default | Primary | Secondary | Tertiary | Info | Success | Warning | Error | Dark | Transparent | Inherit | Surface |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Small | ||||||||||||
| Medium | ||||||||||||
| Large |
Horizontal and vertical
Radios flow in a row by default. Stack them for long labels or when the options read as a list.
Horizontal (default)
Vertical
Label placement
LabelPlacement puts the label on any side of the circle. Start and End follow the reading direction.
Rich options
Child content can hold more than a label: here each delivery option shows its price and arrival time, bound to an enum.
Disabled options, read-only and required
Disable a single option or the whole group. A required group reports its error under the options.
One option disabled
Whole group read-only
Playground
Change any parameter; the markup below updates with only the values that differ from the defaults.
<MudRadioGroup @bind-Value="_bread">
<MudRadio Value="@("Sourdough")" Color="Color.Primary">Sourdough</MudRadio>
…
</MudRadioGroup>