Select

<dui-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>
</dui-select>

Usage

<dui-select>
    <option value="...">...</option>
</dui-select>

The dui-select Tag Helper has full support for ASP.NET Core model binding using the asp-for and asp-items attributes. When using model binding, DuneUI 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

<dui-select asp-for="CabinClass" asp-items="@Html.GetEnumSelectList<CabinClass>()">
</dui-select>

public class BookingFormModel
{
    [Display(
        Name = "Cabin Class",
        Description = "Higher classes offer more legroom, priority boarding, and flexible refund policies."
    )]
    public CabinClass CabinClass { get; set; }
}

Model binding validation

When using model binding, validation errors from Model state are displayed correctly.

<dui-select asp-for="CabinClass" asp-items="@Html.GetEnumSelectList<CabinClass>()">
    <option value="">-- Select cabin class --</option>
</dui-select>

public class BookingFormValidationModel
{
    [Display(
        Name = "Cabin Class",
        Description = "Higher classes offer more legroom, priority boarding, and flexible refund policies."
    )]
    [Required(ErrorMessage = "Please select a valid cabin class")]
    public CabinClass? CabinClass { get; set; }
}

With Field

If you are not using model binding, you can use the various Field Tag Helpers to wrap your select inside a field.

<dui-field>
    <dui-field-label for="native-select-cabin-class">Cabin Class</dui-field-label>
    <dui-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>
    </dui-select>
    <dui-field-description>Higher classes offer more legroom, priority boarding, and flexible refund policies.</dui-field-description>
</dui-field>

Implicit Field

You can also implicitly wrap the select inside a Field using the shorthand syntax and setting the label and description attributes.

<dui-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>
</dui-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 dui-field-error Tag Helper (when using explicit fields) or the error attribute (when using implicit fields).

<dui-field>
    <dui-field-label for="native-select-cabin-class">Cabin Class</dui-field-label>
    <dui-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>
    </dui-select>
    <dui-field-error>Please select a valid cabin class</dui-field-error>
    <dui-field-description>Higher classes offer more legroom, priority boarding, and flexible refund policies.</dui-field-description>
</dui-field>

<dui-select label="Cabin Class" 
            description="Higher classes offer more legroom, priority boarding, and flexible refund policies."
            error="Please select a valid 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>
</dui-select>

Sizes

Use the size attribute to control the size of the select.

<div class="flex flex-col gap-4">
    <dui-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>
    </dui-select>
    <dui-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>
    </dui-select>
</div>

Groups

<dui-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>
</dui-select>

Disabled

<dui-select disabled>
    <option value="">Disabled</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="blueberry">Blueberry</option>
</dui-select>