SelectField
Labelled select-dropdown field — wraps the Select primitive cluster with a label, help text, and error state
Interactive-mode
Examples
Default select field
Select field with help text and error state
Priority is required.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| SelectField | A labelled select-dropdown field chunk. Wraps the Select primitive cluster inside a space-y-1.5 envelope with an optional FormLabel, the select trigger and items, and optional help text. |
SelectField
A labelled select-dropdown field chunk. Wraps the Select primitive cluster inside a space-y-1.5 envelope with an optional FormLabel, the select trigger and items, and optional help text.
| Property | Type | Required | Description |
|---|---|---|---|
| Label | string? | Label text rendered above the select via FormLabel. Omit to hide the label. | |
| HelpText | string? | Helper text rendered below the select. Shown in text-danger-fg when Error is true, otherwise text-muted-foreground. | |
| Error | bool | Applies error styling to the label and help text. Default: false. | |
| Required | bool | Appends a red asterisk to the label via FormLabel. Default: false. | |
| Disabled | bool | Disables the underlying select. Default: false. | |
| Id | string | HTML id wired to the label's for attribute. Auto-generated by default. | |
| Value | string? | Currently selected value. Use @bind-Value for two-way binding. | |
| ValueChanged | EventCallback<string?> | Fires when the selected value changes. Part of the @bind-Value pair. | |
| Placeholder | string? | Placeholder text shown in the trigger when no value is selected. | |
| Items | IList<SelectField.SelectFieldItem>? | The list of options to render. Each item has Value and Label properties. |