Components

Textarea

Textarea allows users to input multi-line text data such as comments, bios, or descriptions.
Source Styles source

Usage

The textarea component provides a multi-line input for longer text such as comments, descriptions, or notes.

<div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
    <LumexTextarea Label="Bio" />
    <LumexTextarea Label="Bio" Placeholder="Tell us about yourself..." />
</div>

Disabled

You can disable a textarea to prevent user interaction. A disabled textarea is faded and does not respond to user clicks. 

<LumexTextarea Disabled="@true"
               Label="Bio"
               Placeholder="Tell us about yourself..."
               Class="max-w-xs" />

Read-Only

Set the textarea component to read-only to display the current state without allowing changes. 

<LumexTextarea ReadOnly="@true"
               Label="Bio"
               Value="Loves Blazor and ships UIs in record time."
               Class="max-w-xs" />

Required

Mark the textarea as required to indicate that it must be filled out before form submission. An asterisk will appear at the end of the label. 

<LumexTextarea Required="@true"
               Label="Bio"
               Placeholder="Tell us about yourself..."
               Class="max-w-xs" />

Sizes

The textarea component supports multiple sizes to fit different layouts and design needs.

Small
Medium
Large
<div class="w-full grid grid-cols-1 gap-4">
    @foreach( var size in _sizes )
    {
        <div>
            <div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
                <LumexTextarea Size="@size" Label="Bio" />
                <LumexTextarea Size="@size" Label="Bio" Placeholder="Tell us about yourself..." />
            </div>
            <small class="text-default-400 mt-1">@size</small>
        </div>
    }
</div>

@code {
    private Size[] _sizes = [
        Size.Small,
        Size.Medium,
        Size.Large
    ];
}

Radius

Adjust the border radius of the textarea for rounded or squared corners.

None
Small
Medium
Large
<div class="w-full grid grid-cols-1 gap-4 md:grid-cols-2">
    @foreach( var radius in _radiuses )
    {
        <div>
            <LumexTextarea Radius="@radius" Label="Radius" Placeholder="@radius.ToString()" />
            <small class="text-default-400 mt-1">@radius</small>
        </div>
    }
</div>

@code {
    private Radius[] _radiuses = [
        Radius.None,
        Radius.Small,
        Radius.Medium,
        Radius.Large
    ];
}

Colors

Customize the textarea color to match your theme or emphasize certain fields.

Default
Primary
Secondary
Success
Warning
Danger
Info
<div class="w-full grid grid-cols-1 gap-4 md:grid-cols-2">
    @foreach( var color in _colors )
    {
        <div>
            <LumexTextarea Color="@color"
                           Label="Bio"
                           Placeholder="Tell us about yourself..."
                           Value="Loves Blazor and ships UIs in record time." />
            <small class="text-default-400 mt-1">@color</small>
        </div>
    }
</div>

@code {
    private ThemeColor[] _colors = [
        ThemeColor.Default,
        ThemeColor.Primary,
        ThemeColor.Secondary,
        ThemeColor.Success,
        ThemeColor.Warning,
        ThemeColor.Danger,
        ThemeColor.Info
    ];
}

Variants

Choose from different textarea variants, such as Flat, Underlined, or Outlined, for various visual styles.

Flat
Outlined
Underlined
<div class="w-full grid grid-cols-1 gap-4">
    @foreach( var variant in _variants )
    {
        <div>
            <div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
                <LumexTextarea Variant="@variant" Label="Bio" />
                <LumexTextarea Variant="@variant" Label="Bio" Placeholder="Tell us about yourself..." />
            </div>
            <small class="text-default-400 mt-1">@variant</small>
        </div>
    }
</div>

@code {
    private InputVariant[] _variants = [
        InputVariant.Flat,
        InputVariant.Outlined,
        InputVariant.Underlined
    ];
}

Label Placements

Position the label either inside or outside the textarea for flexibility in layout and design.

Inside
Outside
<div class="w-full grid grid-cols-1 gap-4">
    @foreach( var placement in _labelPlacements )
    {
        <div>
            <div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
                <LumexTextarea LabelPlacement="@placement" Label="Bio" />
                <LumexTextarea LabelPlacement="@placement" Label="Bio" Placeholder="Tell us about yourself..." />
            </div>
            <small class="text-default-400 mt-1">@placement</small>
        </div>
    }
</div>

@code {
    private LabelPlacement[] _labelPlacements = [
        LabelPlacement.Inside,
        LabelPlacement.Outside
    ];
}

Autosize

By default, the textarea grows with its content between MinRows and MaxRows. Set DisableAutosize to lock the height at MinRows. 

<div class="w-full flex flex-col gap-6">
    <div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
        <LumexTextarea Label="Default (3-8 rows)"
                       Placeholder="Type until the textarea grows..." />

        <LumexTextarea Label="Custom range"
                       MinRows="2"
                       MaxRows="6"
                       Placeholder="Grows between 2 and 6 rows..." />

        <LumexTextarea Label="Autosize disabled"
                       DisableAutosize="@true"
                       MinRows="4"
                       Placeholder="Locked at 4 rows; never grows." />
    </div>
</div>

Clear Button

Enable the button to clear the input with a single click.

<div class="w-full">
    <LumexTextarea Clearable="@true"
                   Label="Bio"
                   Placeholder="Tell us about yourself..."
                   Value="@_value"
                   Variant="@InputVariant.Outlined"
                   OnCleared="@Notify"
                   Class="max-w-xs" />
</div>
<p class="text-sm text-default-500">@_text</p>

@code {
    private string? _text;
    private string? _value = "Loves Blazor and ships UIs in record time.";

    private void Notify()
    {
        _value = null;

        if( string.IsNullOrEmpty( _text ) )
        {
            _text = "Input is cleared!";
        }
        else
        {
            _text += " ..and again..";
        }
    }
}

Start & End Content

Add custom content, such as icons or labels, to the start or end of the textarea for added functionality. 

@using LumexUI.Shared.Icons

<div class="w-full grid gap-4">
    <div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
        <LumexTextarea Label="Note"
                       Placeholder="Type a note..."
                       LabelPlacement="@LabelPlacement.Outside"
                       StartContent="@_pencilIcon" />

        <LumexTextarea Label="Search"
                       Placeholder="Type to search..."
                       LabelPlacement="@LabelPlacement.Outside"
                       StartContent="@_searchIcon" />
    </div>

    <div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
        <LumexTextarea Label="Note"
                       Placeholder="Type a note..."
                       LabelPlacement="@LabelPlacement.Outside"
                       EndContent="@_pencilIcon" />

        <LumexTextarea Label="Search"
                       Placeholder="Type to search..."
                       LabelPlacement="@LabelPlacement.Outside"
                       EndContent="@_searchIcon" />
    </div>
</div>

@code {
    private RenderFragment _searchIcon = @<SearchIcon Size="20" class="text-default-400 shrink-0" />;
    private RenderFragment _pencilIcon = @<MailIcon Size="20" class="text-default-400 shrink-0" />;
}

Description

Provide a brief description below the textarea to offer guidance or additional context.

A short paragraph that will appear on your public profile.
<LumexTextarea Label="Bio"
               Placeholder="Tell us about yourself..."
               Description="A short paragraph that will appear on your public profile."
               Class="max-w-xs" />

Error Message

Display an error message below the textarea to indicate validation issues. You can combine the Invalid and ErrorMessage parameters to show an invalid input. An error message is shown only when the Invalid parameter is set to true.

Please write at least 10 characters
@using FluentValidation
@using FluentValidation.Results

<LumexTextarea Variant="@InputVariant.Underlined"
               Label="Bio"
               Required="@true"
               ErrorMessage="@_userValidator.BioErrorMessage"
               Invalid="@(!string.IsNullOrEmpty(_userValidator.BioErrorMessage))"
               Color="@(!string.IsNullOrEmpty(_userValidator.BioErrorMessage) ? ThemeColor.Danger : ThemeColor.Success)"
               Value="@_user.Bio"
               ValueChanged="@OnBioChange"
               Class="max-w-xs" />

@code {
    private User _user = new();
    private UserValidator _userValidator = new();

    protected override void OnInitialized()
    {
        _user.Bio = "Hi";
        Validate();
    }

    private void OnBioChange( string value )
    {
        _user.Bio = value;
        Validate();
    }

    private void Validate()
    {
        var result = _userValidator.Validate( _user );
        if( !result.IsValid )
        {
            _userValidator.BioErrorMessage = result.Errors
                .Where( failure => failure.PropertyName == nameof( User.Bio ) )
                .Select( failure => failure.ErrorMessage )
                .FirstOrDefault();
        }
        else
        {
            _userValidator.BioErrorMessage = null;
        }
    }

    public class User
    {
        public string? Bio { get; set; }
    }

    public class UserValidator : AbstractValidator<User>
    {
        public string? BioErrorMessage { get; set; }

        public UserValidator()
        {
            RuleFor( user => user.Bio )
                .NotEmpty().WithMessage( "Bio is required" )
                .MinimumLength( 10 ).WithMessage( "Please write at least 10 characters" );
        }
    }
}

Debounce Delay

Enable debounced input to delay updates to the textarea value, reducing the frequency of changes and improving performance. You can achieve this by setting the DebounceDelay value and Behavior to OnInput.

Value: 

<div class="w-full flex flex-col gap-2">
    <LumexTextarea DebounceDelay="250"
                   Behavior="@InputBehavior.OnInput"
                   Label="Bio"
                   Placeholder="Tell us about yourself..."
                   Clearable="@true"
                   Class="max-w-xs"
                   @bind-Value="@_value" />

    <p class="text-sm text-default-500">
        Value: @_value
    </p>
</div>

@code {
    private string? _value;
}

Two-way Data Binding

The textarea component supports two-way data binding, allowing you to programmatically control the value. You can achieve this using the @bind-Value directive, or the Value and ValueChanged parameters.

Value:

Value: Loves Blazor.

<div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
    <div class="w-full flex flex-col gap-2">
        <LumexTextarea Label="Bio"
                       Placeholder="Tell us about yourself..."
                       Clearable="@true"
                       @bind-Value="@_valueOne" />
        <p class="text-sm text-default-500">
            Value: @_valueOne
        </p>
    </div>

    <div class="w-full flex flex-col gap-2">
        <LumexTextarea Label="Bio"
                       Placeholder="Tell us about yourself..."
                       Clearable="@true"
                       Value="@_valueTwo"
                       ValueChanged="@OnValueChanged" />
        <p class="text-sm text-default-500">
            Value: @_valueTwo
        </p>
    </div>
</div>

@code {
    private string? _valueOne;
    private string? _valueTwo = "Loves Blazor.";

    private void OnValueChanged( string value )
    {
        _valueTwo = value;
    }
}

Custom styles

This component supports named slots, which allow custom styles to be applied to specific parts of the component:

  • Base: The overall wrapper.
  • Label: The label element.
  • InputWrapper: The wrapper of the label and the inner wrapper (when the label is inside).
  • InnerWrapper: The wrapper of the input, start/end content.
  • Input: The textarea element.
  • ClearButton: The clear button element.
  • HelperWrapper: The wrapper of a description and an error message.
  • Description: The description of the input field.
  • ErrorMessage: The error message of the input field.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

Textarea

  • Class: The CSS class name that styles the wrapper of the textarea.
  • Classes: The CSS class names for the textarea slots that style entire textarea.
@using LumexUI.Shared.Icons

<LumexTextarea Label="Note"
               Placeholder="Type a note..."
               Radius="@Radius.Large"
               Clearable="@true"
               Classes="@_classes">
    <StartContent>
        <SearchIcon Size="18" class="text-secondary-400 shrink-0" />
    </StartContent>
</LumexTextarea>

@code {
    private InputFieldSlots _classes = new()
    {
        Label = "text-default-700",
        InnerWrapper = "bg-transparent",
        InputWrapper = ElementClass.Empty()
            .Add( "shadow-xl" )
            .Add( "bg-default-200/50" )
            .Add( "backdrop-blur-xl" )
            .Add( "backdrop-saturate-200" )
            .Add( "hover:bg-default-200/70" )
            .Add( "group-data-[focus=true]:bg-default-200/85" )
            .ToString(),
        Input = ElementClass.Empty()
            .Add( "bg-transparent" )
            .Add( "text-default-900" )
            .Add( "placeholder:text-default-500" )
            .ToString()
    };
}

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

An unhandled error has occurred. Reload 🗙