Skip to content

feat(components): add Textarea component #313

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
desmondinho merged 19 commits into from
May 14, 2026
Merged

feat(components): add Textarea component #313

Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
76d9294
refactor(input): extract inner element render into virtual hook
desmondinho May 10, 2026
010dea0
feat(textarea): add LumexTextarea component
desmondinho May 10, 2026
a7df08f
test(textarea): cover rendering, parameters, and debounce behavior
desmondinho May 10, 2026
105ba4b
docs(textarea): add page, examples, and navigation entries
desmondinho May 10, 2026
726bb71
fix(textarea): bind value via attribute instead of element content
desmondinho May 11, 2026
d49cb54
refactor(textarea): render own DOM matching HeroUI layout
desmondinho May 11, 2026
e089f31
refactor(input): drop unused RenderInputElement hook
desmondinho May 11, 2026
26e0de3
style(textarea): add missing label-placement compound rules
desmondinho May 11, 2026
13287cf
style(textarea): gate outside-label absolute positioning on non-multi…
desmondinho May 11, 2026
ba098fc
style(textarea): suppress floating-label scale and translate for insi…
desmondinho May 11, 2026
6471408
style(textarea): restore floating-label scale on inside label
desmondinho May 11, 2026
f4b7dfe
docs(textarea): drop mt-2 hack from start/end content icons
desmondinho May 14, 2026
3b17a13
style(textarea): hide scrollbar on the textarea
desmondinho May 14, 2026
9d5f71b
style(textarea): apply size-based label text-size for both placements
desmondinho May 14, 2026
273188b
style(input): restore shrink-0 on label baseline
desmondinho May 14, 2026
eb62ce7
feat(textarea): expose data-autosize-disabled to allow manual resize
desmondinho May 14, 2026
d479a50
style(textarea): always apply resize-none on the textarea
desmondinho May 14, 2026
8c8ec3a
docs(textarea): tighten Autosize and StartEndContent example layouts
desmondinho May 14, 2026
406581c
chore(*): coderabbit suggestions
desmondinho May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
style(textarea): add missing label-placement compound rules 
HeroUI's input.ts defines four `isMultiline`-aware compound variants
that depend on labelPlacement (py-2 on inputWrapper, pb-1.5 / pb-0.5 on
label, pt-0 on input). Apply them in GetMultilineStyles so the rendered
classes match HeroUI's textarea for both inside and outside labels.
  • Loading branch information
@desmondinho
desmondinho committed May 11, 2026
commit 26e0de359e54dac80ab66ebd1e16b83cd3116bba
20 changes: 13 additions & 7 deletions src/LumexUI/Styles/InputField.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,14 +123,20 @@ internal static class InputField

// Per-slot tweaks applied when the input renders as a multi-line textarea.
// Translated from HeroUI's `isMultiline: true` rules in input.ts.
private static ElementClass GetMultilineStyles( string slot )
private static ElementClass GetMultilineStyles( LabelPlacement labelPlacement, string slot )
{
return ElementClass.Empty()
.Add( "relative", when: slot is nameof( _label ) )
.Add( "h-auto! min-h-auto!", when: slot is nameof( _inputWrapper ) )
.Add( "items-start group-has-[label]:items-start", when: slot is nameof( _innerWrapper ) )
.Add( "resize-none transition-[height] duration-100 motion-reduce:transition-none", when: slot is nameof( _input ) )
.Add( "absolute top-2 end-2 z-10", when: slot is nameof( _clearButton ) );
.Add( "absolute top-2 end-2 z-10", when: slot is nameof( _clearButton ) )
// labelPlacement=Outside + multiline
.Add( "py-2", when: slot is nameof( _inputWrapper ) && labelPlacement is LabelPlacement.Outside )
.Add( "pb-1.5", when: slot is nameof( _label ) && labelPlacement is LabelPlacement.Outside )
// labelPlacement=Inside + multiline
.Add( "pb-0.5", when: slot is nameof( _label ) && labelPlacement is LabelPlacement.Inside )
.Add( "pt-0", when: slot is nameof( _input ) && labelPlacement is LabelPlacement.Inside );
}

private static ElementClass GetSizeStyles( Size size, string slot )
Expand Down Expand Up @@ -521,7 +527,7 @@ public static string GetLabelStyles<TValue>( LumexInputFieldBase<TValue> input )
.Add( ElementClass.Empty()
.Add( "group-data-[filled-focused=true]:text-default-600", when: input.LabelPlacement is LabelPlacement.Inside && input.Color is ThemeColor.Default )
.Add( "group-data-[filled-focused=true]:text-foreground", when: input.LabelPlacement is LabelPlacement.Outside && input.Color is ThemeColor.Default ) )
.Add( GetMultilineStyles( slot: nameof( _label ) ), when: input is LumexTextarea )
.Add( GetMultilineStyles( input.LabelPlacement, slot: nameof( _label ) ), when: input is LumexTextarea )
.Add( input.Classes?.Label )
.ToString();
}
Expand Down Expand Up @@ -550,7 +556,7 @@ public static string GetInputWrapperStyles<TValue>( LumexInputFieldBase<TValue>
.Add( GetLabelPlacementInsideBySizeStyles( input.Size, slot: nameof( _inputWrapper ) ), when: input.LabelPlacement is LabelPlacement.Inside )
// Outlined & Size.Small
.Add( "py-1", when: input.Variant is InputVariant.Outlined && input.Size is Size.Small )
.Add( GetMultilineStyles( slot: nameof( _inputWrapper ) ), when: input is LumexTextarea )
.Add( GetMultilineStyles( input.LabelPlacement, slot: nameof( _inputWrapper ) ), when: input is LumexTextarea )
.Add( input.Classes?.InputWrapper )
.ToString();
}
Expand All @@ -565,7 +571,7 @@ public static string GetInnerWrapperStyles<TValue>( LumexInputFieldBase<TValue>
.Add( ElementClass.Empty()
.Add( "pb-0.5", when: input.Variant is InputVariant.Underlined && input.Size is Size.Small )
.Add( "pb-1.5", when: input.Variant is InputVariant.Underlined && ( input.Size is Size.Medium or Size.Large ) ) )
.Add( GetMultilineStyles( slot: nameof( _innerWrapper ) ), when: input is LumexTextarea )
.Add( GetMultilineStyles( input.LabelPlacement, slot: nameof( _innerWrapper ) ), when: input is LumexTextarea )
.Add( input.Classes?.InnerWrapper )
.ToString();
}
Expand All @@ -580,7 +586,7 @@ public static string GetInputStyles<TValue>( LumexInputFieldBase<TValue> input )
.Add( GetClearableStyles( slot: nameof( _input ) ) )
.Add( GetInvalidStyles( slot: nameof( _input ) ), when: input.Invalid )
.Add( GetVariantInvalidStyles( input.Variant, slot: nameof( _input ) ), when: input.Invalid )
.Add( GetMultilineStyles( slot: nameof( _input ) ), when: input is LumexTextarea )
.Add( GetMultilineStyles( input.LabelPlacement, slot: nameof( _input ) ), when: input is LumexTextarea )
.Add( input.Classes?.Input )
.ToString();
}
Expand All @@ -591,7 +597,7 @@ public static string GetClearButtonStyles<TValue>( LumexInputFieldBase<TValue> i
.Add( _clearButton )
.Add( GetSizeStyles( input.Size, slot: nameof( _clearButton ) ) )
.Add( GetClearableStyles( slot: nameof( _clearButton ) ) )
.Add( GetMultilineStyles( slot: nameof( _clearButton ) ), when: input is LumexTextarea )
.Add( GetMultilineStyles( input.LabelPlacement, slot: nameof( _clearButton ) ), when: input is LumexTextarea )
.Add( input.Classes?.ClearButton )
.ToString();
}
Expand Down