Select
Displays a list of options for the user to pick from
<sa-select>
<option value="">-- Select cabin class --</option>
<option value="economy">Economy</option>
<option value="premium-economy">Premium Economy</option>
<option value="business">Business</option>
<option value="first">First</option>
</sa-select>Usage
Put native <option> elements inside <sa-select>. It renders a styled <select>.
<sa-select>
<option value="...">...</option>
</sa-select>Examples
Model binding
Supports ASP.NET Core model binding via asp-for and asp-items. When using model binding, StellarAdmin will automatically wrap the select 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-select asp-for="CabinClass" asp-items="@Html.GetEnumSelectList<CabinClass>()">
</sa-select>Model binding validation
When using model binding, validation errors from Model state are displayed correctly.
<sa-select asp-for="CabinClass" asp-items="@Html.GetEnumSelectList<CabinClass>()">
<option value="">-- Select cabin class --</option>
</sa-select>With field
If you are not using model binding, you can use the various Field Tag Helpers to wrap your select inside a field.
<sa-field>
<sa-field-label for="native-select-cabin-class">Cabin Class</sa-field-label>
<sa-select id="native-select-cabin-class">
<option value="">-- Select cabin class --</option>
<option value="economy">Economy</option>
<option value="premium-economy">Premium Economy</option>
<option value="business">Business</option>
<option value="first">First</option>
</sa-select>
<sa-field-description>Higher classes offer more legroom, priority boarding, and flexible refund policies.</sa-field-description>
</sa-field>Implicit field
You can also implicitly wrap the select inside a Field using the shorthand syntax and setting the label and description attributes.
<sa-select label="Cabin Class"
description="Higher classes offer more legroom, priority boarding, and flexible refund policies.">
<option value="">-- Select cabin class --</option>
<option value="economy">Economy</option>
<option value="premium-economy">Premium Economy</option>
<option value="business">Business</option>
<option value="first">First</option>
</sa-select>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 select.
The error message can be displayed using either a <sa-field-error> Tag Helper (when using explicit fields) or the error attribute (when using implicit fields).
<sa-field>
<sa-field-label for="native-select-cabin-class">Cabin Class</sa-field-label>
<sa-select id="native-select-cabin-class" aria-invalid="true">
<option value="">-- Select cabin class --</option>
<option value="economy">Economy</option>
<option value="premium-economy">Premium Economy</option>
<option value="business">Business</option>
<option value="first">First</option>
</sa-select>
<sa-field-error>Please select a valid cabin class</sa-field-error>
<sa-field-description>Higher classes offer more legroom, priority boarding, and flexible refund policies.</sa-field-description>
</sa-field>Sizes
Use the size attribute to control the size of the select.
<div class="flex flex-col gap-4">
<sa-select size="SelectSize.Small">
<option value="">-- Select cabin class --</option>
<option value="economy">Economy</option>
<option value="premium-economy">Premium Economy</option>
<option value="business">Business</option>
<option value="first">First</option>
</sa-select>
<sa-select>
<option value="">-- Select cabin class --</option>
<option value="economy">Economy</option>
<option value="premium-economy">Premium Economy</option>
<option value="business">Business</option>
<option value="first">First</option>
</sa-select>
</div>Groups
Native <optgroup> elements are supported for grouping options.
<sa-select>
<option value="">-- Select your program --</option>
<optgroup label="Star Alliance">
<option value="united">United MileagePlus</option>
<option value="lufthansa">Lufthansa Miles & More</option>
<option value="air-canada">Air Canada Aeroplan</option>
<option value="ana">ANA Mileage Club</option>
<option value="singapore">Singapore Airlines KrisFlyer</option>
</optgroup>
<optgroup label="Oneworld">
<option value="american">American Airlines AAdvantage</option>
<option value="british">British Airways Executive Club</option>
<option value="cathay">Cathay Pacific Asia Miles</option>
<option value="qantas">Qantas Frequent Flyer</option>
<option value="qatar">Qatar Airways Privilege Club</option>
</optgroup>
<optgroup label="SkyTeam">
<option value="delta">Delta SkyMiles</option>
<option value="air-france">Air France-KLM Flying Blue</option>
<option value="korean">Korean Air SKYPASS</option>
<option value="aeromexico">Aeromexico Club Premier</option>
<option value="virgin-atlantic">Virgin Atlantic Flying Club</option>
</optgroup>
<optgroup label="Other Partners">
<option value="emirates">Emirates Skywards</option>
<option value="etihad">Etihad Guest</option>
<option value="jetblue">JetBlue TrueBlue</option>
</optgroup>
</sa-select>Disabled
Add disabled to the select to prevent interaction.
<sa-select disabled>
<option value="">Disabled</option>
<option value="economy">Economy</option>
<option value="business">Business</option>
<option value="first">First</option>
</sa-select>Accessibility
<sa-select> renders a native <select>, so keyboard navigation and screen reader support are the browser's own. The chevron is decorative and hidden from assistive technology. With asp-for or the label attribute the label is wired to the select for you. Set aria-invalid="true" on a select that is not model bound to expose its error state.
Part classes
Pass a SelectClassNames instance from the StellarAdmin.TagHelpers namespace to <sa-select> 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 SelectClassNames
{
Root = "travel-field",
Label = "travel-label",
Description = "travel-help",
Control = "travel-select-control",
};
}
<sa-select id="classes-cabin" label="Cabin class" description="Choose your preferred cabin." class-names="@partClasses">
<option value="economy">Economy</option>
<option value="business">Business</option>
<option value="first">First</option>
</sa-select>| 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, when rendered. |
Content | The generated container around the label and supporting text in a horizontal implicit field. |
Control | The container around the select and dropdown icon. |
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.
API Reference
<sa-select>
Renders a native <select> element inside a wrapper <div>. When asp-for or asp-items is set, it delegates to the built-in ASP.NET Core Select Tag Helper to generate the options and selected value.
Prop
Type