Blazor Fluent UI Server

Basic TextFields

Standard

Postal Code autocomplete

Password

Disabled

Read-only

Required

Required but without a label, indicator is shown next to the TextField

With an icon

With Error

With Placeholder

Disabled with placeholder

<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

TextField Multiline

TextField Multiline Required

TextField Multiline Disabled

Not resizable

Auto-adjusting height

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

Standard::

Disabled::

Required::

Borderless single-line TextField

Borderless multi-line TextField

<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

With text only Prefix

https://

With custom content Prefix

With text only Suffix

bananas

With custom content Suffix

With Prefix & Suffix

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

TextField OnInput 1

TextField OnInput 2

TextField OnChange 1

TextField OnChange 2

<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.

String-based validation

String-based validation on render

String-based validation only on change

Both description and error message

field description

Deferred string-based validation

Validates only on focus and blur

Validates only on blur

Underlined field :

Uses the errormessage property to set an error state

Both DefaultValue and Value set

<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

<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>

TextField

Overview

Usage