Radio button
Allow users to select from a list of choices
<sa-field-set class="w-full">
<sa-field-legend>Bed Preference</sa-field-legend>
<sa-field-description>
Choose your preferred bed configuration.
</sa-field-description>
<sa-field-group data-slot="radio-group">
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="radio" name="bed-preference" value="king" id="bed-king" />
<sa-field-content>
<sa-field-label for="bed-king">
1 King
</sa-field-label>
<sa-field-description>
Large bed for couples or solo travelers
</sa-field-description>
</sa-field-content>
</sa-field>
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="radio" name="bed-preference" value="queen" id="bed-queen" />
<sa-field-content>
<sa-field-label for="bed-queen">
1 Queen
</sa-field-label>
<sa-field-description>
Standard bed for up to two people
</sa-field-description>
</sa-field-content>
</sa-field>
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="radio" name="bed-preference" value="single" id="bed-single" checked />
<sa-field-content>
<sa-field-label for="bed-single">
2 Single
</sa-field-label>
<sa-field-description>
Ideal for friends or colleagues
</sa-field-description>
</sa-field-content>
</sa-field>
</sa-field-group>
</sa-field-set>Usage
StellarAdmin does not have a specific Radio button Tag Helper, but uses the normal <sa-input> Tag Helper with the type attribute specified as radio.
<sa-input type="radio"/>Examples
Model binding
Supports ASP.NET Core model binding via asp-for. When using model binding, StellarAdmin will automatically wrap the input inside a Field with the correct label, description, and placeholder text derived from data attributes. You can opt out of this behavior by setting the render-field attribute to false.
<sa-field-set class="w-full">
<sa-field-legend>Bed Preference</sa-field-legend>
<sa-field-description>
Choose your preferred bed configuration.
</sa-field-description>
<sa-field-group data-slot="radio-group">
<sa-input asp-for="BedType" type="radio" value="king"
label="1 King"
description="Large bed for couples or solo travelers"
/>
<sa-input asp-for="BedType" type="radio" value="queen"
label="1 Queen"
description="Standard bed for up to two people"
/>
<sa-input asp-for="BedType" type="radio" value="single"
label="2 Single"
description="Ideal for friends or colleagues"
/>
</sa-field-group>
</sa-field-set>
Model binding validation
When using model binding, a radio button will reflect an error state for validation errors from Model state.
However, the radio button will not display the error message - it will only indicate that the radio has an error state by adding a red border. To display the error message, you will need to explicitly add a <sa-field-error> Tag Helper that is bound to the same property using the asp-for attribute.
The reason for this behavior is that multiple radio buttons are typically bound to the same property. Therefore, if the error message is displayed on the radio button, the same error message will be repeated for each individual radio button.
Instead, the preferred behavior would be to display a single error message for the entire group of radio buttons that are bound to the same property. It is therefore up to you as developer to explicitly display the error message in the correct place in the user interface using the <sa-field-error> component.
<sa-field-set class="w-full">
<sa-field-legend>Bed Preference</sa-field-legend>
<sa-field-description>
Choose your preferred bed configuration.
</sa-field-description>
<sa-field-group data-slot="radio-group">
<sa-input asp-for="BedType" type="radio" value="king"
label="1 King"
description="Large bed for couples or solo travelers"
/>
<sa-input asp-for="BedType" type="radio" value="queen"
label="1 Queen"
description="Standard bed for up to two people"
/>
<sa-input asp-for="BedType" type="radio" value="single"
label="2 Single"
description="Ideal for friends or colleagues"
/>
<sa-field-error asp-for="BedType"/>
</sa-field-group>
</sa-field-set>
With field
If you are not using model binding, you can use the various Field Tag Helpers to wrap your input inside a field.
<sa-field-set class="w-full">
<sa-field-legend>Bed Preference</sa-field-legend>
<sa-field-description>
Choose your preferred bed configuration.
</sa-field-description>
<sa-field-group data-slot="radio-group">
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="radio" name="explicit-bed-preference" value="king" id="explicit-bed-king" />
<sa-field-content>
<sa-field-label for="explicit-bed-king">
1 King
</sa-field-label>
<sa-field-description>
Large bed for couples or solo travelers
</sa-field-description>
</sa-field-content>
</sa-field>
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="radio" name="explicit-bed-preference" value="queen" id="explicit-bed-queen" />
<sa-field-content>
<sa-field-label for="explicit-bed-queen">
1 Queen
</sa-field-label>
<sa-field-description>
Standard bed for up to two people
</sa-field-description>
</sa-field-content>
</sa-field>
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="radio" name="explicit-bed-preference" value="single" id="explicit-bed-single" checked />
<sa-field-content>
<sa-field-label for="explicit-bed-single">
2 Single
</sa-field-label>
<sa-field-description>
Ideal for friends or colleagues
</sa-field-description>
</sa-field-content>
</sa-field>
</sa-field-group>
</sa-field-set>Implicit field
You can also implicitly wrap the input inside a Field using the shorthand syntax and setting the label and description attributes.
<sa-field-set class="w-full">
<sa-field-legend>Bed Preference</sa-field-legend>
<sa-field-description>
Choose your preferred bed configuration.
</sa-field-description>
<sa-field-group data-slot="radio-group">
<sa-input type="radio" name="implicit-bed-preference" value="king"
label="1 King"
description="Large bed for couples or solo travelers"/>
<sa-input type="radio" name="implicit-bed-preference" value="queen"
label="1 Queen"
description="Standard bed for up to two people"/>
<sa-input type="radio" name="implicit-bed-preference" value="single"
label="2 Single"
description="Ideal for friends or colleagues"
checked/>
</sa-field-group>
</sa-field-set>Choice cards
Wrap each option's <sa-field> inside its <sa-field-label> to turn the whole field into a clickable card. Because the label wraps the field, clicking anywhere on the card selects the radio, the selected card is highlighted, and keyboard focus outlines the card rather than the radio itself. Use <sa-field-title> for the option title, since the field label is now the wrapping element.
<sa-field-set class="w-full max-w-md">
<sa-field-legend>Fare Type</sa-field-legend>
<sa-field-description>
Choose the fare that fits your travel plans.
</sa-field-description>
<sa-field-group data-slot="radio-group">
<sa-field-label for="fare-saver">
<sa-field orientation="FieldOrientation.Horizontal">
<sa-field-content>
<sa-field-title>Economy Saver</sa-field-title>
<sa-field-description>
Lowest fare, no changes or refunds
</sa-field-description>
</sa-field-content>
<sa-input type="radio" name="fare-type" value="saver" id="fare-saver"/>
</sa-field>
</sa-field-label>
<sa-field-label for="fare-flex">
<sa-field orientation="FieldOrientation.Horizontal">
<sa-field-content>
<sa-field-title>Economy Flex</sa-field-title>
<sa-field-description>
Free date changes up to 24 hours before departure
</sa-field-description>
</sa-field-content>
<sa-input type="radio" name="fare-type" value="flex" id="fare-flex" checked/>
</sa-field>
</sa-field-label>
<sa-field-label for="fare-business">
<sa-field orientation="FieldOrientation.Horizontal">
<sa-field-content>
<sa-field-title>Business</sa-field-title>
<sa-field-description>
Priority boarding, lounge access, and full refunds
</sa-field-description>
</sa-field-content>
<sa-input type="radio" name="fare-type" value="business" id="fare-business"/>
</sa-field>
</sa-field-label>
</sa-field-group>
</sa-field-set>Manual validation
If you're not using ASP.NET Core model binding, you can manually indicate validation errors by setting the aria-invalid attribute to true. This will display a red border around the input. The error message can be displayed using either a <sa-field-error> Tag Helper.
<sa-field-set class="w-full">
<sa-field-legend>Bed Preference</sa-field-legend>
<sa-field-description>
Choose your preferred bed configuration.
</sa-field-description>
<sa-field-group data-slot="radio-group">
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="radio" name="validation-bed-preference" value="king" id="validation-bed-king" aria-invalid="true" />
<sa-field-content>
<sa-field-label for="validation-bed-king">
1 King
</sa-field-label>
<sa-field-description>
Large bed for couples or solo travelers
</sa-field-description>
</sa-field-content>
</sa-field>
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="radio" name="validation-bed-preference" value="queen" id="validation-bed-queen" aria-invalid="true" />
<sa-field-content>
<sa-field-label for="validation-bed-queen">
1 Queen
</sa-field-label>
<sa-field-description>
Standard bed for up to two people
</sa-field-description>
</sa-field-content>
</sa-field>
<sa-field orientation="FieldOrientation.Horizontal">
<sa-input type="radio" name="validation-bed-preference" value="single" id="validation-bed-single" aria-invalid="true" />
<sa-field-content>
<sa-field-label for="validation-bed-single">
2 Single
</sa-field-label>
<sa-field-description>
Ideal for friends or colleagues
</sa-field-description>
</sa-field-content>
</sa-field>
<sa-field-error>Please select a bed type</sa-field-error>
</sa-field-group>
</sa-field-set>Disabled
Add disabled to a radio to prevent it from being selected.
<sa-field-set class="w-full">
<sa-field-legend>Bed Preference</sa-field-legend>
<sa-field-description>
Choose your preferred bed configuration.
</sa-field-description>
<sa-field-group data-slot="radio-group">
<sa-input type="radio" name="disabled-bed-preference" value="king"
label="1 King"
description="Large bed for couples or solo travelers"
disabled/>
<sa-input type="radio" name="disabled-bed-preference" value="queen"
label="1 Queen"
description="Standard bed for up to two people"
disabled/>
<sa-input type="radio" name="disabled-bed-preference" value="single"
label="2 Single"
description="Ideal for friends or colleagues"
checked
disabled/>
</sa-field-group>
</sa-field-set>Accessibility
A radio button renders a native <input type="radio">, so a group of radios sharing a name is one Tab stop and the arrow keys move the selection between them. The visible indicator is decorative. With asp-for or the label attribute the label is wired to each radio for you.
Wrap a radio group in an <sa-field-set> with an <sa-field-legend> so the group has a name, and display validation errors once for the group with a single <sa-field-error> rather than on each radio. Set aria-invalid="true" on radios that are not model bound to expose their error state.
Part classes
Pass an InputClassNames instance from the StellarAdmin.TagHelpers namespace to <sa-input> using class-names. Each property accepts an optional string of space-separated CSS classes, which are added to the part's existing classes.
@{
var partClasses = new InputClassNames
{
Root = "travel-field",
Label = "travel-label",
Description = "travel-help",
Control = "travel-radio-control",
};
}
<sa-field-set>
<sa-field-legend>Bed preference</sa-field-legend>
<sa-field-group>
<sa-input type="radio" name="classes-bed" id="classes-king" value="king" label="King bed" description="A spacious bed for two." checked class-names="@partClasses" />
<sa-input type="radio" name="classes-bed" id="classes-twin" value="twin" label="Twin beds" description="Separate beds for traveling friends." class-names="@partClasses" />
</sa-field-group>
</sa-field-set>| Property | Target |
|---|---|
Root | The generated field wrapper, when the input renders an implicit field. |
Label | The generated field label, when rendered. |
Description | The generated help text, when rendered. |
Error | The generated validation message element for an unbound radio. Model-bound radios omit this element; put class directly on the group's explicit <sa-field-error>. |
Content | The generated container around the label and supporting text in a horizontal implicit field. |
Control | The container around the radio input and its indicator. |
Root, Label, Description, Error, and Content are inherited from FieldClassNames. They only style generated field elements; with render-field="false", apply class directly to any field elements you compose yourself. The control-specific parts still apply. See Field part classes for the shared behavior and a styled example.
For a choice card built with explicit fields, apply classes directly to the card's field and label. These input options only style the radio and any field elements it generates.
API Reference
<sa-input>
<sa-input with type="radio" renders a radio button.
Prop
Type