TextField

Overview

Text fields (TextField) give people a way to enter and edit text. They’re used in forms, modal dialogs, tables, and other surfaces where text input is required.

Usage

Basic TextFields
Required but without a label, indicator is shown next to the TextField
<div class="textFieldDiv">
    <Label HtmlFor="StandardTF">Standard</Label>
    <TextField ForID="StandardTF"/>
</div>
<div class="textFieldDiv">
    <TextField Label="Postal Code autocomplete" AutoComplete="AutoComplete.PostalCode" />
</div>
<div class="textFieldDiv">
    <TextField Label="Password" InputType="InputType.Password" />
</div>
<div class="textFieldDiv">
    <TextField Label="Disabled" Disabled="true" Value="I am disabled" />
</div>
<div class="textFieldDiv">
    <TextField Label="Read-only" ReadOnly="true" Value="I am read-only" />
</div>
<div class="textFieldDiv">
    <TextField Label="Required" Required="true" />
</div>
<div class="textFieldDiv">
    <TextField Required="true" />
    <span><i>Required but without a label, indicator is shown next to the TextField</i></span>
</div>
<div class="textFieldDiv">
    <TextField Label="With an icon" IconName="Home" />
</div>
<div class="textFieldDiv">
    <TextField Label="With Error" ErrorMessage="there is an error" />
</div>
@*<div class="textFieldDiv">
       <TextField Label="With Input Mask" MaskChar="+" />
</div>*@
<div class="textFieldDiv">
    <TextField Label="With Placeholder" Placeholder="Please enter text here" />
</div>
<div class="textFieldDiv">
    <TextField Label="Disabled with placeholder" Placeholder="I am disabled" Disabled="true" />
</div>
            
            
Multiline TextFields

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat lacus vitae ex aliquam fermentum. Aenean viverra sollicitudin felis, nec malesuada sem cursus vitae. Maecenas lacus risus, scelerisque ac risus nec, hendrerit tristique risus. Cras sollicitudin suscipit pretium. Nunc dapibus gravida ligula, nec lacinia lorem aliquet id. Curabitur mauris turpis, consequat non magna nec, scelerisque accumsan est. Maecenas volutpat mauris vel mattis bibendum. Donec ornare elit quis dui euismod, vel cursus nibh viverra. Ut consectetur.

<div class="textFieldDiv">
    <TextField Label="TextField Multiline" Multiline="true" />
</div>
<div class="textFieldDiv">
    <TextField Label="TextField Multiline Required" Multiline="true" Required="true" />
</div>
<div class="textFieldDiv">
    <TextField Label="TextField Multiline Disabled" Multiline="true" Disabled="true" />
</div>
<div class="textFieldDiv">
    <TextField Label="Not resizable" Multiline="true" Resizable="false" />
</div>
<div class="textFieldDiv">
    <TextField Label="Auto-adjusting height" Multiline="true" AutoAdjustHeight="true" @bind-Value="model.exampleText" />
    <p>@((MarkupString) model.exampleText.Replace("\n", "<br />"))</p>
</div>
            
            
Underlined and borderless TextFields
<div class="textFieldDiv">
    <TextField Label="Standard:" Underlined="true" />
</div>
<div class="textFieldDiv">
    <TextField Label="Disabled:" Underlined="true" Disabled="true" Value="I am disabled" />
</div>
<div class="textFieldDiv">
    <TextField Label="Required:" Underlined="true" Required="true" Placeholder="Enter text here" />
</div>
<div class="textFieldDiv">
    <TextField Label="Borderless single-line TextField" Borderless="true" Placeholder="No borders here, folks." />
</div>
<div class="textFieldDiv">
    <TextField Label="Borderless multi-line TextField" Multiline="true" Borderless="true" Placeholder="No borders here, folks." />
</div>
            
            
TextField with prefix and/or suffix
https://
bananas
Dr.
Esquire
<div class="textFieldDiv">
    <TextField Label="With text only Prefix" Prefix="https://" />
</div>
<div class="textFieldDiv">
    <TextField Label="With custom content Prefix">
        <PrefixContent>
            <Icon IconName="add" />
        </PrefixContent>
    </TextField>
</div>
<div class="textFieldDiv">
    <TextField Label="With text only Suffix" Suffix="bananas" />
</div>
<div class="textFieldDiv">
    <TextField Label="With custom content Suffix">
        <SuffixContent>
            <Icon IconName="home" />
        </SuffixContent>
    </TextField>
</div>
<div class="textFieldDiv">
    <TextField Label="With Prefix & Suffix" Prefix="Dr." Suffix="Esquire" />
</div>
            
            
Binding Modes
<div class="textFieldDiv" style="display:flex; flex-direction: row">
    <TextField Label="TextField OnInput 1" @bind-Value=@onInputContent @bind-Value:event="OnInput" />
    <TextField Label="TextField OnInput 2" Value=@onInputContent />
</div>
<div class="textFieldDiv" style="display:flex; flex-direction: row">
    <TextField Label="TextField OnChange 1" @bind-Value=@onChangeContent @bind-Value:event="OnChange" />
    <TextField Label="TextField OnChange 2" Value=@onChangeContent />
</div>
            
            
TextField Error Message Variations
Hint: the input length must be less than 3.
field description
<strong>Hint: the input length must be less than 3.</strong>
<div class="textFieldDiv">
    <TextField Label="String-based validation" OnGetErrorMessage="GetErrorMessage" />
</div>
<div class="textFieldDiv">
    <TextField Label="String-based validation on render" DefaultValue="Shows an error message on render" OnGetErrorMessage="GetErrorMessage" />
</div>
<div class="textFieldDiv">
    <TextField Label="String-based validation only on change" DefaultValue="Validates only on input change, not on first render" OnGetErrorMessage="GetErrorMessage" ValidateOnLoad="false" />
</div>
<div class="textFieldDiv">
    <TextField Label="Both description and error message" DefaultValue="Shows description and error message on render" Description="field description" OnGetErrorMessage="GetErrorMessage" />
</div>
<div class="textFieldDiv">
    <TextField Label="Deferred string-based validation" Placeholder="Validates after user stops typing for 2 seconds" DeferredValidationTime="2000" OnGetErrorMessage="GetErrorMessage" />
</div>
<div class="textFieldDiv">
    <TextField Label="Validates only on focus and blur" Placeholder="Validates only on input focus and blur" ValidateOnFocusIn="true" ValidateOnFocusOut="true" OnGetErrorMessage="GetErrorMessage" />
</div>
<div class="textFieldDiv">
    <TextField Label="Validates only on blur" Placeholder="Validates only on blur" ValidateOnFocusOut="true" OnGetErrorMessage="GetErrorMessage" />
</div>
<div class="textFieldDiv">
    <TextField Label="Underlined field " DefaultValue="This value is too long" Underlined="true" OnGetErrorMessage="GetErrorMessage" />
</div>
<div class="textFieldDiv">
    <TextField Label="Uses the errormessage property to set an error state" Placeholder="This field always has an error" ErrorMessage="This is a statically set error message" />
</div>
<div class="textFieldDiv">
    <TextField Label="Both DefaultValue and Value set" DefaultValue="This is a default value" Value="This is a regular value" OnGetErrorMessage="GetErrorMessage" />
</div>
            
            
Validation using Blazor's EditForm and DataAnnotations

Name on change:
Name on input:
<EditForm Model=@model OnValidSubmit=@HandleValidSubmit>
    <DataAnnotationsValidator />
    <FluentUIValidationSummary />
    <div class="textFieldDiv">
        <TextField Label="OnChange - Input can't be longer than 5 characters" @bind-Value=@model.NameOnChange @bind-Value:event="OnChange" />
    </div>
    <div class="textFieldDiv">
        <TextField Label="OnInput - Input can't be longer than 5 characters" @bind-Value=@model.NameOnInput @bind-Value:event="OnInput" />
    </div>
    <SubmitButton Text="Submit" />
    <br />Name on change: @(model.NameOnChange ?? "")
    <br />Name on input: @(model.NameOnInput ?? "")
</EditForm>