Select: Blazor select component

Examples

Binding

SelectItem children declare the options; Clearable adds an empty first option labelled by ClearText.

Plan Selected: Pro

website/Examples/DataInput/SelectBasicExample.razor Source

Typed values

T can be any type, such as an int or an enum; an item without content shows its value.

Seats

Deploy day

seats=50 · day=Wednesday

website/Examples/DataInput/SelectTypedExample.razor Source

Multiple selection

MultiSelection binds the picked items to SelectedValues.

Regions Hold Ctrl (or ⌘) to pick several.

Selected: Europe, Asia Pacific

website/Examples/DataInput/SelectMultipleExample.razor Source

States

Disabled, Error with ErrorText, and Dense.

Workspace

Country * Pick a billing country.

Plan

website/Examples/DataInput/SelectStatesExample.razor Source

API

<Select<T>>

DaisyBlazor

Parameters

ClearText string
= ""
Label of the empty option added when Clearable is set; empty by default.
Clearable bool
= false
Adds an empty first option (labelled ClearText) that resets the value; single-selection only.
Dense bool
= false
Renders the compact select-sm size.
Disabled bool
= false
Disables the native select element.
Error bool
= false
Marks the control as invalid (adds select-error).
ErrorText string
= null
Message shown beneath the control when Error is set. Replaces HelperText while an error is showing, matching TextField's behaviour.
FieldName string
= null
Field name used to pick up a server-side error from an enclosing ServerValidation. Not called Name so the HTML name attribute keeps splatting through.
For object
= null
Accepted for MudBlazor compatibility; currently has no effect.
FullWidth bool
= true
Stretches the wrapper and select to full width (w-full); on by default.
HelperText string
= null
Hint text shown beneath the select; hidden while an error message is showing.
Label string
= null
Text rendered in a label above the select, linked to it by id.
Margin Margin
= Margin.Normal
Spacing preset; Margin.Dense renders the compact select-sm size, like Dense.
MultiSelection bool
= false
Renders a native multiple select bound through SelectedValues instead of Value.
Required bool
= false
Appends an asterisk to the label and sets the native HTML required attribute.
RequiredError string
= null
Message shown when an enclosing Form validates this Required select while nothing is chosen. Defaults to "Required".
SelectedValues IEnumerable<T>
= null
The selected values when MultiSelection is on; supports @bind-SelectedValues.
Validation object
= null
Checked by an enclosing Form against Value: Func<T, string?> (error or null), Func<T, bool> or Func<T, IEnumerable<string>>.
Value T
= null
The selected value in single-selection mode; supports two-way binding with @bind-Value.
Variant Variant
= Variant.Outlined
Outlined (default) adds select-bordered; Filled also adds bg-base-200; Text renders a borderless ghost select (select-ghost).
Class string
= null
Extra CSS classes added to the wrapping fieldset element.
Style string
= null
Inline styles applied to the wrapping fieldset element.

Name	Type	Default	Description
ClearText	string	""	Label of the empty option added when Clearable is set; empty by default.
Clearable	bool	false	Adds an empty first option (labelled ClearText) that resets the value; single-selection only.
Dense	bool	false	Renders the compact select-sm size.
Disabled	bool	false	Disables the native select element.
Error	bool	false	Marks the control as invalid (adds select-error).
ErrorText	string	null	Message shown beneath the control when Error is set. Replaces HelperText while an error is showing, matching TextField's behaviour.
FieldName	string	null	Field name used to pick up a server-side error from an enclosing ServerValidation. Not called Name so the HTML name attribute keeps splatting through.
For	object	null	Accepted for MudBlazor compatibility; currently has no effect.
FullWidth	bool	true	Stretches the wrapper and select to full width (w-full); on by default.
HelperText	string	null	Hint text shown beneath the select; hidden while an error message is showing.
Label	string	null	Text rendered in a label above the select, linked to it by id.
Margin	Margin	Margin.Normal	Spacing preset; Margin.Dense renders the compact select-sm size, like Dense.
MultiSelection	bool	false	Renders a native multiple select bound through SelectedValues instead of Value.
Required	bool	false	Appends an asterisk to the label and sets the native HTML required attribute.
RequiredError	string	null	Message shown when an enclosing Form validates this Required select while nothing is chosen. Defaults to "Required".
SelectedValues	IEnumerable<T>	null	The selected values when MultiSelection is on; supports @bind-SelectedValues.
Validation	object	null	Checked by an enclosing Form against Value: Func<T, string?> (error or null), Func<T, bool> or Func<T, IEnumerable<string>>.
Value	T	null	The selected value in single-selection mode; supports two-way binding with @bind-Value.
Variant	Variant	Variant.Outlined	Outlined (default) adds select-bordered; Filled also adds bg-base-200; Text renders a borderless ghost select (select-ghost).
Class	string	null	Extra CSS classes added to the wrapping fieldset element.
Style	string	null	Inline styles applied to the wrapping fieldset element.

Events

SelectedValuesChanged EventCallback<IEnumerable<T>>
Raised with the chosen values whenever the selection changes in multi-selection mode.
ValueChanged EventCallback<T>
Raised with the newly selected value (or default when cleared) in single-selection mode.

Name	Type	Description
SelectedValuesChanged	EventCallback<IEnumerable<T>>	Raised with the chosen values whenever the selection changes in multi-selection mode.
ValueChanged	EventCallback<T>	Raised with the newly selected value (or default when cleared) in single-selection mode.

Content

ChildContent RenderFragment
The SelectItem<T> children that define the options.

Name	Type	Description
ChildContent	RenderFragment	The SelectItem<T> children that define the options.

<SelectItem<T>>

DaisyBlazor

Parameters

Disabled bool
= false
Disables the rendered option so it cannot be chosen.
Value T
= null
The value selected in the parent Select when this option is chosen.
Class string
= null
CSS classes applied to the rendered option.
Style string
= null
Inline styles applied to the rendered option.

Name	Type	Default	Description
Disabled	bool	false	Disables the rendered option so it cannot be chosen.
Value	T	null	The value selected in the parent Select when this option is chosen.
Class	string	null	CSS classes applied to the rendered option.
Style	string	null	Inline styles applied to the rendered option.

Content

ChildContent RenderFragment
Option text; when omitted the parent Select renders the Value as text.

Name	Type	Description
ChildContent	RenderFragment	Option text; when omitted the parent Select renders the Value as text.

From MudSelect

Select keeps MudSelect's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.