ComponentsInputs and forms
Text field
A labeled single- or multi-line text input with helper text, adornments, counters and validation. Use it whenever people type free text; switch to a select or autocomplete when the answer comes from a known list.
Labels, placeholders and helper text
The label names the field, the placeholder shows the expected shape, and helper text explains the rules before anyone gets them wrong.
Catalog entry: Untitled by Mira Okonkwo
Every variant and margin
Variant sets the outline style; Margin sets the vertical rhythm. Dense margins suit toolbars and filters, Normal margins suit long forms.
| Variant ↓ · Margin → | None | Dense | Normal |
|---|---|---|---|
| Text | |||
| Filled | |||
| Outlined |
Adornments, icons and clearing
Icons and short text sit at the start or end of the input. A clickable adornment needs an accessible name; Clearable adds a clear button once there is text.
kg
Select the gift icon to redeem the code.
Counters, multiple lines and auto-grow
Counter with MaxLength shows the remaining room. Lines fixes the height of a text area; Sizing.Auto grows it with the content up to MaxLines.
Passwords and input types
InputType picks the browser keyboard and autofill behavior. A password field can offer a reveal button that toggles the type.
Immediate and debounced updates
By default the value updates on blur or Enter. Immediate updates on every keystroke; DebounceInterval waits for a pause in typing, which suits searches.
Value: “”
Value: “”
Value: “” · searches run: 0
Disabled, read-only and error states
Disabled fields are skipped by the keyboard and not submitted; read-only fields stay focusable and copyable. Your own code can also set Error.
Playground
Change any parameter; the markup below updates with only the values that differ from the defaults.
<MudTextField
@bind-Value="_title"
Label="Book title"
HelperText="As printed on the cover"
Variant="Variant.Outlined"
Adornment="Adornment.Start"
AdornmentIcon="@Icons.Material.Outlined.Bookmark"
Clearable="true" />