SearchInput
A search input with icon and clear button
Examples
Default
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| SearchInput | Outer container that lays out an optional left element, the SearchInputField, and an optional right element in a single row with a focus-visible border. |
| SearchInputLeftElement | Leading slot, usually holding a magnifier Icon. Sized to match the input and marked pointer-events:none so clicks pass through to the field. |
| SearchInputField | The actual <input> element. Exposes standard Value/ValueChanged for two-way binding plus an optional DebounceMs to throttle change notifications while typing. |
| SearchInputRightElement | Trailing slot, typically containing SearchInputClearButton or another inline action. |
| SearchInputClearButton | Pre-styled close-icon button that clears the search field. Wire OnClear to reset your bound value. |
SearchInput
Outer container that lays out an optional left element, the SearchInputField, and an optional right element in a single row with a focus-visible border.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the outer div. | |
| ChildContent | RenderFragment? | Composed children — typically SearchInputLeftElement, SearchInputField, and SearchInputRightElement. |
SearchInputLeftElement
Leading slot, usually holding a magnifier Icon. Sized to match the input and marked pointer-events:none so clicks pass through to the field.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the left element wrapper. | |
| ChildContent | RenderFragment? | Icon or small leading markup. |
SearchInputField
The actual <input> element. Exposes standard Value/ValueChanged for two-way binding plus an optional DebounceMs to throttle change notifications while typing.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | string? | The current input value. Use @bind-Value for two-way binding. | |
| ValueChanged | EventCallback<string?> | Fires when the value changes (after the DebounceMs delay, if set). Part of the @bind-Value pair. | |
| Placeholder | string? | Placeholder text shown when the field is empty. | |
| Type | string | Native <input> type attribute. Default: "text". | |
| Disabled | bool | When true, the field cannot be edited. Default: false. | |
| DebounceMs | int | Milliseconds to wait after the last keystroke before firing ValueChanged. Default: 0 (no debounce). | |
| ClassName | string? | Extra CSS classes appended to the <input> element. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the <input> element. |
SearchInputRightElement
Trailing slot, typically containing SearchInputClearButton or another inline action.
| Property | Type | Required | Description |
|---|---|---|---|
| ClassName | string? | Extra CSS classes appended to the right element wrapper. | |
| ChildContent | RenderFragment? | Trailing content — usually SearchInputClearButton. |
SearchInputClearButton
Pre-styled close-icon button that clears the search field. Wire OnClear to reset your bound value.
| Property | Type | Required | Description |
|---|---|---|---|
| OnClear | EventCallback | Invoked when the button is clicked. Reset the bound SearchInputField value here. | |
| AriaLabel | string | Accessible label for the button. Default: "Clear search". | |
| ClassName | string? | Extra CSS classes appended to the button. |