Text field
An implementation of a text field. The <FluentTextField> supports two visual appearances, outline and filled, with the control defaulting to the outline appearance.
<FluentTextField> wraps the <fluent-text-field> element, a web component implementation of a text field leveraging the
Fluent UI design system.
Note: With the
TextFieldType.Passwordsome warnings might show up in your browser's developer tools about non-uniques id's being used. The warning is wrong. The (Chromium) dev tools are not taking the shadow DOM into consideration when scanning for unique id's. Eachid=controlis being applied in a component' shadow DOM and is unique to that component.
Chromium is doing some fancy extra check (with a link on creating beautiful login forms) whichwe can not prevent and the warning cannot be removed from our side.
Examples
Default
Without label:
You entered:
With label:
You entered:
Minlength
You entered:
Maxlength
You entered:
Displays
Full Width
Placeholder
States
Required
Disabled
Read only
Icons
With start
With end
Types
Password
Email (with spellcheck)
Telephone number
Url
Text with InputMode
Color picker
Search input
Numeric
Focus
Autofocus
Commented out to prevent page actually jumping to this location. See example code below for implementation.
Focus Async
Filled Appearance
Default
Placeholder
Required
Disabled
Read only
Documentation
FluentTextField 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 FluentInputAppearance |
AriaLabel | string? | Gets or sets the text used on aria-label attribute. | |
AutoComplete | string? | Specifies whether a form or an input field should have autocomplete 'on' or 'off' or another value. An Id value must be set to use this property. | |
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. |
InputMode | InputMode? | Gets or sets the type of data that can be entered by the user when editing the element or its content. This allows a browser to display an appropriate virtual keyboard. Not supported by Safari. | |
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 length. | |
Minlength | int? | Gets or sets the minimum length. | |
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 a value indicating whether spellcheck should be used. | |
TextFieldType | TextFieldType? | Gets or sets the text filed type. See TextFieldType | |
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. |