TextField: Blazor text field component

Examples

Binding

@bind-Value is two-way and pushes each keystroke, so anything bound to the value updates as the user types.

Full name

Company

Signing up: Priya Nair — …

Both fields update the summary as you type.

website/Examples/DataInput/TextFieldBasicExample.razor Source

Adornments

Adornment places an AdornmentIcon or AdornmentText at the start or end of the input.

Search projects

Workspace.acme.cloud

Query: (empty) · Site: northwind.acme.cloud

website/Examples/DataInput/TextFieldAdornmentsExample.razor Source

Multi-line

Any Lines value above 1 swaps the input for a textarea of that many rows.

Release notes76 / 280 characters

website/Examples/DataInput/TextFieldMultilineExample.razor Source

States

Required, Error with ErrorText, Disabled, ReadOnly, Dense, and InputType for password, email and friends.

Invoice number *Shown at the top of the PDF, e.g. INV-2041

Year foundedUse four digits, e.g. 2019.

Company

Region

Password0 characters

Dense

website/Examples/DataInput/TextFieldStatesExample.razor Source

Playground

Project nameShown on the dashboard

Label

Placeholder

HelperText

InputType InputType

Lines

Dense

Disabled

ReadOnly

Required

Error

ErrorText

<TextField
           Label="Project name"
           Placeholder="Customer portal"
           HelperText="Shown on the dashboard" />

API

<TextField>

DaisyBlazor

Parameters

Adornment Adornment
= Adornment.None
Where AdornmentIcon/AdornmentText render: Start or End inside the input; None (default) hides them.
AdornmentIcon string
= null
Icon name rendered as the adornment at the Adornment position.
AdornmentText string
= null
Text rendered as the adornment at the Adornment position.
Clearable bool
= false
Renders a clear button inside a single-line input while it has a value (not on multi-line, disabled or read-only fields).
Dense bool
= false
When true renders the small size (input-sm / textarea-sm).
Disabled bool
= false
Disables the input or textarea.
Error bool
= false
When true applies the error style (input-error / textarea-error).
ErrorText string
= null
Error message shown below the field (in place of HelperText) when the field is in error.
FieldName string
= null
Field name used to pick up a server-side error from an enclosing ServerValidation. Deliberately NOT called Name: a parameter called Name would capture the HTML name attribute instead of letting it splat through, silently breaking form posts.
For object
= null
Validation expression (MudBlazor compat; not used for HTML rendering).
FullWidth bool
= true
When true (default) the field and its fieldset span the full width (w-full).
HelperText string
= null
Hint text shown below the field when there is no error message.
Immediate bool
= false
Accepted for MudBlazor compatibility; currently has no effect (value always updates on each keystroke).
InputType InputType
= InputType.Text
HTML input type to render (text, password, email, number, date, ...). Defaults to Text.
Label string
= null
Label text rendered above the field; an asterisk is appended when Required.
Lines int
= 1
Number of visible rows; values above 1 render a textarea instead of an input. Defaults to 1.
Margin Margin
= Margin.Normal
Margin.Dense renders the small size (input-sm), same as Dense; defaults to Normal.
Mask object
= null
Accepted for MudBlazor compatibility; currently has no effect (no masking is applied).
Placeholder string
= null
Placeholder text shown when the field is empty.
ReadOnly bool
= false
Makes the input or textarea read-only.
Required bool
= false
Sets the HTML required attribute and appends an asterisk to the label.
RequiredError string
= null
Message shown when an enclosing Form validates this Required field while it is empty. Defaults to "Required".
Validation object
= null
Checked by an enclosing Form: Func<string?, string?> (error or null), Func<string?, bool> or Func<string?, IEnumerable<string>>.
Value string
= null
The current text value; bind with @bind-Value.
Variant Variant
= Variant.Outlined
Outlined (default) draws the daisyUI border; Filled adds a bg-base-200 background; Text renders a borderless ghost field (input-ghost).
Class string
= null
Extra CSS classes merged onto the outer fieldset.
Style string
= null
Inline CSS styles applied to the outer fieldset.

Name	Type	Default	Description
Adornment	Adornment	Adornment.None	Where AdornmentIcon/AdornmentText render: Start or End inside the input; None (default) hides them.
AdornmentIcon	string	null	Icon name rendered as the adornment at the Adornment position.
AdornmentText	string	null	Text rendered as the adornment at the Adornment position.
Clearable	bool	false	Renders a clear button inside a single-line input while it has a value (not on multi-line, disabled or read-only fields).
Dense	bool	false	When true renders the small size (input-sm / textarea-sm).
Disabled	bool	false	Disables the input or textarea.
Error	bool	false	When true applies the error style (input-error / textarea-error).
ErrorText	string	null	Error message shown below the field (in place of HelperText) when the field is in error.
FieldName	string	null	Field name used to pick up a server-side error from an enclosing ServerValidation. Deliberately NOT called Name: a parameter called Name would capture the HTML name attribute instead of letting it splat through, silently breaking form posts.
For	object	null	Validation expression (MudBlazor compat; not used for HTML rendering).
FullWidth	bool	true	When true (default) the field and its fieldset span the full width (w-full).
HelperText	string	null	Hint text shown below the field when there is no error message.
Immediate	bool	false	Accepted for MudBlazor compatibility; currently has no effect (value always updates on each keystroke).
InputType	InputType	InputType.Text	HTML input type to render (text, password, email, number, date, ...). Defaults to Text.
Label	string	null	Label text rendered above the field; an asterisk is appended when Required.
Lines	int	1	Number of visible rows; values above 1 render a textarea instead of an input. Defaults to 1.
Margin	Margin	Margin.Normal	Margin.Dense renders the small size (input-sm), same as Dense; defaults to Normal.
Mask	object	null	Accepted for MudBlazor compatibility; currently has no effect (no masking is applied).
Placeholder	string	null	Placeholder text shown when the field is empty.
ReadOnly	bool	false	Makes the input or textarea read-only.
Required	bool	false	Sets the HTML required attribute and appends an asterisk to the label.
RequiredError	string	null	Message shown when an enclosing Form validates this Required field while it is empty. Defaults to "Required".
Validation	object	null	Checked by an enclosing Form: Func<string?, string?> (error or null), Func<string?, bool> or Func<string?, IEnumerable<string>>.
Value	string	null	The current text value; bind with @bind-Value.
Variant	Variant	Variant.Outlined	Outlined (default) draws the daisyUI border; Filled adds a bg-base-200 background; Text renders a borderless ghost field (input-ghost).
Class	string	null	Extra CSS classes merged onto the outer fieldset.
Style	string	null	Inline CSS styles applied to the outer fieldset.

Events

OnKeyUp EventCallback<KeyboardEventArgs>
Raised on each keyup event in the field.
ValueChanged EventCallback<string>
Raised on every keystroke (the input event) with the new text.

Name	Type	Description
OnKeyUp	EventCallback<KeyboardEventArgs>	Raised on each keyup event in the field.
ValueChanged	EventCallback<string>	Raised on every keystroke (the input event) with the new text.

From MudTextField

TextField keeps MudTextField's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.