forms
Textarea
A multi-line text control that can grow with its content instead of scrolling.
Examples
Fixed and auto-sizing
`autoSize` forces `resize: none` — a box that resizes itself and can also be dragged fights the user.
Starts at 2 rows, stops growing at 8.
Own the source
Noksha ships as a package and as copy-paste source. Take the files and they are yours to change. These are read from the generated registry, so they are exactly what the library ships — never a paraphrase of it.
Take these files, and field, internal helpers along with them — the imports below point at them. Or let the CLI do it: npx @noksha-ui/cli add textarea writes them, follows the same dependency graph, and fixes up the imports.
export { Textarea, textareaVariants } from './textarea.js';
export type {
TextareaProps,
TextareaResize,
TextareaSize,
TextareaVariant,
} from './textarea.types.js';API reference
Accepted values
- TextareaResize
noneverticalhorizontalboth
TextareaProps
Also accepts everything from React.TextareaHTMLAttributes<HTMLTextAreaElement>.
| Prop | Type | Description |
|---|---|---|
| variant | TextareaVariant | — |
| size | TextareaSize | — |
| invalid | boolean | — |
| autoSize | boolean | Grow with the content instead of scrolling. Turning this on forces `resize` to `none`: a box that resizes itself and can also be dragged fights the user, snapping back to the content height the next time they type. |
| minRows | number | Smallest height, in rows. |
| maxRows | number | Largest height before it starts scrolling. Only meaningful with `autoSize`. |
| resize | TextareaResize | — |