Skip to content
Docs

Textarea

@hua-labs/hua
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Textarea } from "@hua-labs/hua";

Length:
0

default
outline
filled
ghost
glass

sm
md
lg

Resize Options

vertical (default)
horizontal
both
none

Normal
Error
Success
Disabled

variant"default" | "outline" | "filled" | "ghost" | "glass""default"Visual style variant
size"sm" | "md" | "lg""md"Textarea size
errorbooleanfalseError state indicator
successbooleanfalseSuccess state indicator
resize"none" | "vertical" | "horizontal" | "both""vertical"Resize behavior
rowsnumber-Number of visible text lines
placeholderstring-Placeholder text
disabledbooleanfalseDisables the textarea

docs:common.basicUsagetsx
1import { Textarea } from '@hua-labs/hua';
2 
3<Textarea placeholder="Enter your message..." />
Controlledtsx
1const [text, setText] = useState("");
2 
3<Textarea
4  value={text}
5  onChange={(e) => setText(e.target.value)}
6  placeholder="Type something..."
7/>
docs:common.variantstsx
1<Textarea variant="default" placeholder="Default" />
2<Textarea variant="outline" placeholder="Outline" />
3<Textarea variant="filled" placeholder="Filled" />
4<Textarea variant="ghost" placeholder="Ghost" />

  • •aria-label: Use aria-label or associated label for accessibility
  • •aria-invalid: Applied in error state
  • •Focus Ring: Visible focus indicator for keyboard users
SliderNumberInput