Multiline in Blazor TextBox Component

7 Oct 20211 minute to read

This feature allows the textbox to accept one or more lines of text like address, description, comments, and more.

Create multiline textbox

The default textbox can be converted into the multiline textbox by setting the Multiline API value as true or pass HTML5 textarea as element to the textbox.

The multiline text box allows to resize it in vertical direction alone.

@using Syncfusion.Blazor.Inputs

<div class="multiline">
    <SfTextBox Multiline=true Placeholder="Enter your address" Value="Mr. Dodsworth Dodsworth, System Analyst, Studio 103"></SfTextBox>
</div>
<style>
     .multiline{
        margin-top: 60px;
        width: 20%;
    }
</style>

Blazor Multiline TextBox

Implementing floating label

The floating label behavior can be achieved in the multiline text box by setting FloatLabelType to ‘Auto’. The Placeholder text act as floating label to the multiline textbox. The Placeholder text can be provided to the multiline textbox either by using the Placeholder property or Placeholder attribute.

@using Syncfusion.Blazor.Inputs

<label>Float label type as Auto</label>
<div class="multiline">
    <SfTextBox Multiline=true FloatLabelType="@FloatLabelType.Auto" Placeholder="Enter your address"></SfTextBox>
</div>

<label>Float label type as Always</label>
<div class="multiline">
    <SfTextBox Multiline=true FloatLabelType="@FloatLabelType.Always" Placeholder="Enter your address"></SfTextBox>
</div>

<label>Float label type as Never</label>
<div class="multiline">
    <SfTextBox Multiline=true FloatLabelType="@FloatLabelType.Never" Placeholder="Enter your address"></SfTextBox>
</div>

<style>
    .multiline{
        margin-top: 60px;
        width: 20%;
    }
</style>

Blazor Multiline TextBox with Floating Label

Disable resizing

By default, the multiline text box is rendered with resizable. The resize of the multiline text box can be disabled by applying the following CSS styles.

textarea.e-input,
.e-float-input textarea,
.e-float-input.e-control-wrapper textarea,
.e-input-group textarea,
.e-input-group.e-control-wrapper textarea {
    resize: none;
}
@using Syncfusion.Blazor.Inputs

<SfTextBox Multiline=true FloatLabelType="@FloatLabelType.Auto" Placeholder="Enter your address"></SfTextBox>

Disable Resizing in Blazor TextBox