ComponentsForm Blocks
Textarea
Multi-line text input with intent variants, sizes, label positions, character counter, auto-resize, and LTR/RTL support.
Playground
Installation
pnpm add @tessinaui/uiUsage
import { Textarea } from "@tessinaui/ui";{/* Basic */}
<Textarea label="Description" placeholder="Write something…" />
{/* With character counter */}
<Textarea
label="Bio"
maxLength={160}
showCharacterCounter
placeholder="Tell us about yourself…"
/>
{/* Auto-resize, capped at 6 rows */}
<Textarea
label="Notes"
autoResize
minRows={2}
maxRows={6}
placeholder="Start typing — grows automatically…"
/>
{/* Validation state */}
<Textarea
label="Feedback"
intent="error"
supportingText="This field is required"
required
/>Showcase
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Padding and text scale |
intent | "none" | "error" | "warning" | "success" | "info" | "none" | Border and focus-ring colour |
rounded | "none" | "sm" | "md" | "lg" | "full" | "full" | Border radius |
resize | "none" | "vertical" | "horizontal" | "both" | "vertical" | CSS resize handle; ignored when autoResize is true |
labelPosition | "outside-top" | "inside" | "outside-left" | "outside-top" | Where the label is rendered relative to the textarea |
label | string | — | Label text |
required | boolean | — | Appends * to label and sets aria-required |
infoText | string | — | Inline hint rendered beside the label |
supportingText | string | — | Helper / validation message below the textarea |
showCharacterCounter | boolean | false | Shows current / max counter (requires maxLength) |
minRows | number | 3 | Minimum visible rows (maps to HTML rows attribute) |
maxRows | number | — | Maximum rows before scrolling (used with autoResize) |
autoResize | boolean | false | Grows height with content; disables the resize handle |
value | string | — | Controlled value |
defaultValue | string | — | Uncontrolled initial value |
onChange | ChangeEventHandler | — | Called on every keystroke |
disabled | boolean | — | Disables all interaction |
readOnly | boolean | — | Renders with muted background; not editable |
maxLength | number | — | Native character limit; used with showCharacterCounter |
dir | "ltr" | "rtl" | "ltr" | Text direction |
wrapperClassName | string | — | Class on the outermost wrapper div |
containerClassName | string | — | Class on the inner bordered container div |
All standard <textarea> HTML attributes (placeholder, name, rows, cols, autoFocus, spellCheck, etc.) are forwarded to the underlying element.
Notes
- Auto-resize: Sets
height: autoon each change to measurescrollHeight, then applies the result. Works in both controlled and uncontrolled modes. - Inside label: The label renders as small text at the top of the container; the textarea has no extra top padding since the label sits above the text flow naturally.
- Character counter turns red when
currentLength >= maxLength. - Read-only applies a subtle
bg-secondary/30background to signal non-editable content.
Search
A search input with built-in search icon, clear button, optional submit button, loading state, and full RTL support. Follows the Field component's design language with three visual variants.
NumberField
Numeric form input with stacked, split, inline or no increment/decrement buttons. Five sizes, five rounded values, full intent palette, three label positions, prefix/suffix slots, locale-aware formatting via Intl.NumberFormat, and LTR/RTL support.