Search
An implementation of a search component.
The <FluentSearch> supports two visual appearances, outline and filled, with the control defaulting to the outline appearance.
<FluentSearch> wraps the <fluent-search> element, a web component implementation of a search element leveraging the
Fluent UI design system.
Examples
Default
The search box with a label has autocomplete turned off explicitly by using the AutoComplete parameter
Without a label:
Download:
Interactive
You searched for:
Download:
Interactive with debounce
You searched for:
Download:
Immediate (with and without debounce)
You searched for:
Download:
States
Full Width
Placeholder
Required
Disabled
Read only
Download:
Icons
With start
With end
Download:
Focus
Autofocus
Commented out to prevent page actually jumping to this location. See example code below for implementation.
Focus Async
Download:
Filled style
Default
Placeholder
Required
Disabled
Read only
Download:
Miscellaneous
Minlength
Maxlength
Download:
Documentation
FluentSearch Class
Inherits from FluentInputBase<string?>.
There might be parameters and/or methods shown here that are inherited from the component's base type but are not applicable to this component.
Parameters
Name | Type | Default | Description |
|---|---|---|---|
Appearance | FluentInputAppearance | Outline | Gets or sets the visual appearance. See Appearance |
AriaLabel | string? | Gets or sets the text used on aria-label attribute. | |
AutoComplete | string? | Gets or sets whether a form or an input field should have autocomplete 'on' or 'off' or another value. | |
Autofocus | bool | False | Determines if the element should receive document focus on page load. |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
DataList | string? | ||
Disabled | bool | False | Disables the form control, ensuring it doesn't participate in form submission. |
DisplayName | string? | Gets or sets the display name for this field. | |
Embedded | bool | False | Gets or sets if the derived component is embedded in another component. If true, the ClassValue property will not include the EditContext's FieldCssClass. |
Field | FieldIdentifier? | Gets or sets the FluentInputBase that identifies the bound value.If set, this parameter takes precedence over FluentInputBase. | |
Immediate | bool | False | Change the content of this input field when the user write text (based on 'OnInput' HTML event). |
ImmediateDelay | int | 0 | Gets or sets the delay, in milliseconds, before to raise the FluentInputBase event. |
Label | string? | Gets or sets the text to label the input. This is usually displayed just above the input | |
LabelTemplate | RenderFragment? | Gets or sets the content to label the input component. This is usually displayed just above the input | |
Maxlength | int? | Gets or sets the maximum number of characters a user can enter. | |
Minlength | int? | Gets or sets the minimum number of characters a user can enter. | |
Name | string? | Gets or sets the name of the element. Allows access by name from the associated form. ⚠️ This value needs to be set manually for SSR scenarios to work correctly. | |
Pattern | string? | Gets or sets a regular expression that the value must match to pass validation. | |
Placeholder | string? | Gets or sets the short hint displayed in the input before the user enters a value. | |
ReadOnly | bool | False | When true, the control will be immutable by user interaction. readonly HTML attribute for more information. |
Required | bool | False | Gets or sets a value indicating whether the element needs to have a value. |
Size | int? | Gets or sets the size of the text field. | |
Spellcheck | bool? | Gets or sets the if spellcheck should be used. | |
Value | string? | Gets or sets the value of the input. This should be used with two-way binding. | |
ValueExpression | Expression<Func<string>>? | Gets or sets an expression that identifies the bound value. |
EventCallbacks
Name | Type | Description |
|---|---|---|
ValueChanged | EventCallback<string> | Gets or sets a callback that updates the bound value. |
Methods
Name | Parameters | Type | Description |
|---|---|---|---|
FocusAsync | void | Exposes the elements FocusAsync(bool preventScroll) method. | |
FocusAsync | bool preventScroll | void | Exposes the elements FocusAsync(bool preventScroll) method. |