Components Select (enum)

Select (enum)

Form-bound dropdown for any enum. Renders koala-dropdown chrome plus a hidden input so server-side model binding still picks up the value. Labels come from [Display(Name = "…")] attributes on each enum value; the Unknown sentinel is filtered out by default.

<koala-select-enum>

Canonical

Bound to Input.Crm (a DemoCrm? enum). Click to see each value's [Display(Name)] label.

Display attribute

label override

Where the enum identifier reads cleanly ("Reapit", "Jupix", "Alto", "Dezrez", "Loop"), no attribute is needed. Where casing would be wrong ("MriSoftware" should display as "MRI Software"; "AgentOs" should display as "AgentOS"; "StreetCoUk" should display as "Street.co.uk"), add a [Display(Name = "…")] on the enum value and the helper picks it up.

Identifier

Reapit

Rendered label

Reapit

Identifier

MriSoftware

[Display(Name = "MRI Software")]

MRI Software

Identifier

StreetCoUk

[Display(Name = "Street.co.uk")]

Street.co.uk

Variants

3 variants

Optional

optional

Required (no hint)

(default)

Any enum

type inferred from for

Props

7 attributes

Attribute	Values	Notes
for	Model expression	Required. Must resolve to an enum type (nullable supported).
label	String	Optional. Renders a `<label>` above the dropdown.
placeholder	String	Default `Select…`. Shown when nothing is selected.
optional	Boolean	Appends `(optional)` to the label.
exclude-values	Comma-separated identifiers	Default `Unknown`. Override to filter additional values out of the option list.
class	Tailwind classes	Default `mb-5`. Override for tight layouts.

Do & don't

<koala-select-enum for="Input.Crm" label="CRM" optional />

Do Bind directly to the enum property. Display names come from [Display(Name = "…")] on the enum.

<select asp-for="Input.Crm">…</select>

Don't Don't fall back to a native <select>. The design system bans them (§4) — and you'd lose tokenised chrome.