Textarea

since v0.2.1

Multi-line text field — use for longer-form inputs like answers and notes.

Mirrors Input exactly (same surface, hairline border, focus voltage, label/error/hint

treatment); the only differences are <textarea> instead of <input>, a min-h instead

of fixed h-10, vertical padding, and resize-y.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten

pnpm add @hey-mike/tungsten

import { Textarea } from '@hey-mike/tungsten';

import { Textarea } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/textarea/page.tsx

import { Textarea } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function TextareaSnapshot() {
  return (
    <VariantGrid
      title="Textarea"
      variants={[
        { label: 'empty', node: <Textarea placeholder="Type a message…" rows={3} /> },
        { label: 'filled', node: <Textarea defaultValue={'Line one\nLine two\nLine three'} rows={3} /> },
        { label: 'disabled', node: <Textarea defaultValue="Disabled body" rows={3} disabled /> },
      ]}
    />
  );
}

import { Textarea } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';

export default function TextareaSnapshot() {
  return (
    <VariantGrid
      title="Textarea"
      variants={[
        { label: 'empty', node: <Textarea placeholder="Type a message…" rows={3} /> },
        { label: 'filled', node: <Textarea defaultValue={'Line one\nLine two\nLine three'} rows={3} /> },
        { label: 'disabled', node: <Textarea defaultValue="Disabled body" rows={3} disabled /> },
      ]}
    />
  );
}

Props

Surface specific to <Textarea />.

Prop	Type	Default	Description
label	`string`	—	Inline label. Omit when wrapping in a `<FormField>`.
error	`string`	—	Error message; switches focus voltage to error palette.
hint	`string`	—	Help text shown below the textarea. Suppressed when `error` is set.

Used in recipes

Compositions from the /recipes reference that use this component.