SearchField
Labelled search input — wraps the SearchInput primitive family with a magnify icon, clear button, label, and help text
Interactive-mode
Examples
Default search field
With help text
Search across all active users.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| SearchField | A labelled search input chunk. Composes SearchInput, SearchInputLeftElement (with a magnify icon), SearchInputField, and a conditionally rendered SearchInputClearButton inside a space-y-1.5 envelope. The clear button appears only when Value is non-empty. Clearing the value fires ValueChanged with null. |
SearchField
A labelled search input chunk. Composes SearchInput, SearchInputLeftElement (with a magnify icon), SearchInputField, and a conditionally rendered SearchInputClearButton inside a space-y-1.5 envelope. The clear button appears only when Value is non-empty. Clearing the value fires ValueChanged with null.
| Property | Type | Required | Description |
|---|---|---|---|
| Label | string? | Label text rendered above the search input via FormLabel. Omit to hide the label. | |
| HelpText | string? | Helper text rendered below the input. 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 search input. Default: false. | |
| Id | string | HTML id for the search input field — wired to the label's for attribute. Auto-generated by default. | |
| Value | string? | Current search query value. Use @bind-Value for two-way binding. | |
| ValueChanged | EventCallback<string?> | Fires when the query changes, or with null when the clear button is pressed. Part of the @bind-Value pair. | |
| Placeholder | string? | Placeholder text shown in the empty search input. |