LumexUI · desmondinho · May 14, 2026 · May 10, 2026 · May 10, 2026 · May 10, 2026
@@ -50,6 +50,7 @@ public class NavigationStore
 			.Add( new( nameof( LumexSpinner ) ) )
 			.Add( new( nameof( LumexSwitch ) ) )
 			.Add( new( nameof( LumexTabs ) ) )
+			.Add( new( nameof( LumexTextarea ), PageStatus.New ) )
 			.Add( new( nameof( LumexTextbox ) ) )
 			.Add( new( nameof( LumexToastProvider ) ) )
 			.Add( new( nameof( LumexTooltip ) ) )
@@ -116,6 +117,7 @@ public class NavigationStore
 			.Add( new( nameof( LumexSwitch ) ) )
 			.Add( new( nameof( LumexTab ) ) )
 			.Add( new( nameof( LumexTabs ) ) )
+			.Add( new( nameof( LumexTextarea ) ) )
 			.Add( new( nameof( LumexTextbox ) ) )
 			.Add( new( nameof( LumexToastProvider ) ) )
 			.Add( new( nameof( LumexThemeProvider ) ) )

@@ -0,0 +1,16 @@
+<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>
@@ -0,0 +1,29 @@
+<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..";
+        }
+    }
+}
@@ -0,0 +1,24 @@
+<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
+    ];
+}
@@ -0,0 +1,32 @@
+@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()
+    };
+}
@@ -0,0 +1,17 @@
+<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;
+}
@@ -0,0 +1,4 @@
+<LumexTextarea Label="Bio"
+               Placeholder="Tell us about yourself..."
+               Description="A short paragraph that will appear on your public profile."
+               Class="max-w-xs" />
@@ -0,0 +1,4 @@
+<LumexTextarea Disabled="@true"
+               Label="Bio"
+               Placeholder="Tell us about yourself..."
+               Class="max-w-xs" />
@@ -0,0 +1,62 @@
+@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" );
+        }
+    }
+}
@@ -0,0 +1,19 @@
+<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
+    ];
+}
@@ -0,0 +1,4 @@
+<LumexTextarea ReadOnly="@true"
+               Label="Bio"
+               Value="Loves Blazor and ships UIs in record time."
+               Class="max-w-xs" />
@@ -0,0 +1,4 @@
+<LumexTextarea Required="@true"
+               Label="Bio"
+               Placeholder="Tell us about yourself..."
+               Class="max-w-xs" />
@@ -0,0 +1,20 @@
+<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
+    ];
+}
@@ -0,0 +1,32 @@
+@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" />;
+}
@@ -0,0 +1,32 @@
+<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;
+    }
+}
@@ -0,0 +1,4 @@
+<div class="w-full flex flex-wrap gap-4 md:flex-nowrap">
+    <LumexTextarea Label="Bio" />
+    <LumexTextarea Label="Bio" Placeholder="Tell us about yourself..." />
+</div>
@@ -0,0 +1,20 @@
+<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
+    ];
+}
@@ -0,0 +1,18 @@
+<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
+    ];
+}
@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "Textarea.Code.Autosize")">
+    <LumexUI.Docs.Client.Pages.Components.Textarea.Examples.Autosize />
+</PreviewCode>
@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "Textarea.Code.ClearButton")">
+    <LumexUI.Docs.Client.Pages.Components.Textarea.Examples.ClearButton />
+</PreviewCode>
@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "Textarea.Code.Colors")">
+    <LumexUI.Docs.Client.Pages.Components.Textarea.Examples.Colors />
+</PreviewCode>
@@ -0,0 +1,5 @@
+@rendermode InteractiveWebAssembly
+
+<PreviewCode Code="@new(name: null, snippet: "Textarea.Code.CustomStyles")">
+    <LumexUI.Docs.Client.Pages.Components.Textarea.Examples.CustomStyles />
+</PreviewCode>