Components/Inputs/Textarea

Textarea

Inputs

Multi-line text area that auto-grows with content.

Grows vertically as the user types, bounded by minRows and maxRows. Uses a hidden mirror div to measure height without layout jank. Same variant, label, and error system as TextInput.

Usage

import { Textarea } from "nosible-ux"

export default function Example() {
  return (
    <Textarea
      label="Signal notes"
      placeholder="Add context for this watchlist entry..."
      minRows={3}
    />
  )
}

Examples

Bounded growth

Summary (max 6 rows)

Error state

Analyst notes

Notes are required before submitting.

Accessibility

Renders a textarea element. label, error, and description behave identically to TextInput. aria-invalid is set automatically when error is present.

Props

Name	Type	Default	Description
`description`	`string \| undefined`	—	Helper text below the textarea. Suppressed when `error` is present.
`error`	`string \| undefined`	—	Validation error. Sets `aria-invalid` and renders Critical Red text.
`label`	`string \| undefined`	—	Label rendered ALL-CAPS in Space Mono above the textarea.
`maxRows`	`number \| undefined`	`undefined (unbounded)`	Maximum rows before the textarea stops growing and scrolls.
`minRows`	`number \| undefined`	`3`	Minimum number of visible rows.
`size`	`"sm" \| "md" \| "lg" \| undefined`	`"md"`	Visual size — controls padding and text size.
`variant`	`"default" \| "filled" \| "outline" \| undefined`	`"default"`	Visual variant.

← All Components Getting Started →