TextAreaInput

The TextAreaInput component renders an HTML textarea for multiline text entry and styles it with Bulma variants such as colors, sizes, states, readonly, and fixed-size behavior.

API Documentation

How it works #

The TextAreaInput component renders a multiline HTML textarea and binds its value to your Blazor state, making it easy to capture longer free-form text.

How to use:
  1. Add the TextAreaInput component to your page.
  2. Bind its Value using @bind-Value so the textarea stays synchronized with your backing field.
  3. Optionally render the bound value elsewhere in the UI to confirm updates.
This demo shows the basic setup for editing and displaying multiline text with TextAreaInput.
Entered text: 
<TextAreaInput @bind-Value="enteredText" Placeholder="Write your message here" />
<div class="mt-3">Entered text: @enteredText</div>

@code {
    private string? enteredText = null;
}

Set height #

Control the visible height of the textarea with the Rows parameter, which maps directly to the HTML rows attribute.

How to use:
  1. Add the TextAreaInput component and bind its value.
  2. Set Rows to the number of visible lines you want, for example Rows="10".
  3. Adjust the bound content as needed; the textarea keeps the same configured height.
This demo shows a taller textarea configured with ten visible lines. 
<TextAreaInput @bind-Value="enteredText"
               Placeholder="10 lines of textarea"
               Rows="10" />

@code {
    private string? enteredText = "The rows parameter sets the visible height of the textarea.";
}

Colors #

Apply Bulma color variants to the textarea with the Color parameter. This lets you match the control to validation, status, or branding contexts.

How to use:
  1. Add the TextAreaInput component and bind its value.
  2. Set Color to one of the available TextAreaInputColor values such as Link, Primary, Info, Success, Warning, or Danger.
  3. Repeat with other color values to preview the available variants.
This demo shows the supported color themes for TextAreaInput. 
<TextAreaInput Class="mb-3" Color="TextAreaInputColor.Link" Placeholder="Link textarea" @bind-Value="value1" />
<TextAreaInput Class="mb-3" Color="TextAreaInputColor.Primary" Placeholder="Primary textarea" @bind-Value="value2" />
<TextAreaInput Class="mb-3" Color="TextAreaInputColor.Info" Placeholder="Info textarea" @bind-Value="value3" />
<TextAreaInput Class="mb-3" Color="TextAreaInputColor.Success" Placeholder="Success textarea" @bind-Value="value4" />
<TextAreaInput Class="mb-3" Color="TextAreaInputColor.Warning" Placeholder="Warning textarea" @bind-Value="value5" />
<TextAreaInput Color="TextAreaInputColor.Danger" Placeholder="Danger textarea" @bind-Value="value6" />

@code {
    private string? value1 = null;
    private string? value2 = null;
    private string? value3 = null;
    private string? value4 = null;
    private string? value5 = null;
    private string? value6 = null;
}

Sizes #

Use the Size parameter to render small, normal, medium, or large textarea variants while keeping the same binding behavior.

How to use:
  1. Add the TextAreaInput component and bind its value.
  2. Set Size to TextAreaInputSize.Small, Normal, Medium, or Large.
  3. Compare the rendered size variants to choose the one that fits your layout.
This demo illustrates the available textarea sizes. 
<TextAreaInput Class="mb-3" Size="TextAreaInputSize.Small" Placeholder="Small textarea" @bind-Value="value1" />
<TextAreaInput Class="mb-3" Size="TextAreaInputSize.Normal" Placeholder="Normal textarea" @bind-Value="value2" />
<TextAreaInput Class="mb-3" Size="TextAreaInputSize.Medium" Placeholder="Medium textarea" @bind-Value="value3" />
<TextAreaInput Size="TextAreaInputSize.Large" Placeholder="Large textarea" @bind-Value="value4" />

@code {
    private string? value1 = null;
    private string? value2 = null;
    private string? value3 = null;
    private string? value4 = null;
}

States #

The State parameter lets you preview Bulma's visual textarea states without user interaction. Use it for hovered, focused, and loading appearances. When loading is combined with a size, the spinner automatically follows that size.

How to use:
  1. Add the TextAreaInput component and bind its value.
  2. Set State to TextAreaInputState.Hovered, Focused, or Loading.
  3. Optionally combine State="TextAreaInputState.Loading" with Size to resize the loading spinner.
This demo shows the normal, hovered, focused, and loading states, including resized loading indicators. 
<TextAreaInput Class="mb-3" Placeholder="Normal textarea" @bind-Value="value1" />
<TextAreaInput Class="mb-3" State="TextAreaInputState.Hovered" Placeholder="Hovered textarea" @bind-Value="value2" />
<TextAreaInput Class="mb-3" State="TextAreaInputState.Focused" Placeholder="Focused textarea" @bind-Value="value3" />
<TextAreaInput Class="mb-3" State="TextAreaInputState.Loading" Placeholder="Loading textarea" @bind-Value="value4" />
<TextAreaInput Class="mb-3" State="TextAreaInputState.Loading" Size="TextAreaInputSize.Small" Placeholder="Small loading textarea" @bind-Value="value5" />
<TextAreaInput Class="mb-3" State="TextAreaInputState.Loading" Size="TextAreaInputSize.Medium" Placeholder="Medium loading textarea" @bind-Value="value6" />
<TextAreaInput State="TextAreaInputState.Loading" Size="TextAreaInputSize.Large" Placeholder="Large loading textarea" @bind-Value="value7" />

@code {
    private string? value1 = null;
    private string? value2 = null;
    private string? value3 = null;
    private string? value4 = null;
    private string? value5 = null;
    private string? value6 = null;
    private string? value7 = null;
}

Disabled #

Disable the textarea when you want to show content without allowing user interaction.

How to use:
  1. Add the TextAreaInput component and bind its value.
  2. Set Disabled="true" to prevent editing and focusing.
  3. Optionally provide a value or placeholder to show what the field represents.
This demo shows a disabled TextAreaInput field. 
<TextAreaInput Disabled="true"
               Placeholder="Disabled textarea"
               @bind-Value="enteredText" />

@code {
    private string? enteredText = "This textarea is disabled.";
}

Readonly #

Use the ReadOnly parameter when the content should remain selectable and visible but not editable.

How to use:
  1. Add the TextAreaInput component and bind its value.
  2. Set ReadOnly="true" so users can view the text without changing it.
  3. Optionally set Rows to display a larger readonly text area.
This demo shows a readonly textarea with predefined content. 
<TextAreaInput ReadOnly="true"
               Rows="4"
               @bind-Value="enteredText" />

@code {
    private string? enteredText = "This content is readonly.";
}

Fixed size #

Prevent browser resizing by enabling the IsFixedSize parameter, which applies Bulma's has-fixed-size modifier.

How to use:
  1. Add the TextAreaInput component and bind its value.
  2. Set IsFixedSize="true" to disable manual resize handles.
  3. Optionally combine it with Rows to define a consistent visible height.
This demo shows a fixed-size textarea that keeps its configured height. 
<TextAreaInput IsFixedSize="true"
               Rows="6"
               Placeholder="Fixed size textarea"
               @bind-Value="enteredText" />

@code {
    private string? enteredText = null;
}
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!