Textarea

Tier: client

ImportCopy Anchor Link

import { Textarea } from '@nizivo/react/textarea';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/textarea.css';

Static or interactiveCopy Anchor Link

Client. It always ships its client leaf, which reads its Field through FieldScope, so a page with a Textarea also loads FieldScope. The server HTML is a native <textarea> that works before hydration. How to choose.

Height and paddingCopy Anchor Link

The box follows Figma's Textarea (7367:316): 12 px padding on every side and a minimum height of 112 px. Its height is the larger of that minimum and rows (3 by default), so up to four rows of Body/M sit at 112 px and rows={6} is taller. Where the browser supports field-sizing (Chrome and Edge 123 and later, not Firefox 129 or Safari 17.5) it also grows with its content, never below that height; elsewhere the user drags it taller. For a one-line box, such as a chat composer, lower the minimum with the --nz-textarea-min-block-size hook (0 leaves only rows).

.composer .nz-textarea {
  --nz-textarea-min-block-size: 0;
}

Text size on touch screensCopy Anchor Link

Under a coarse pointer (a phone or a tablet), the text and the placeholder are 16 px (Body/L) instead of 14 px (Body/M), because iOS Safari zooms the page into a focused field whose text is smaller than 16 px. Each row is then Body/L's 25.6 px line instead of 21 px, so a tall rows grows more there (Mobile Safari 17.5 rounds each row down to 25 px); the 112 px minimum is the same. --nz-textarea-font replaces the font on every pointer, so a page that sets it also decides whether iOS zooms.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Field } from '@nizivo/react/field';
import { Textarea } from '@nizivo/react/textarea';

export function TextareaExample(): JSX.Element {
  return (
    <Field
      label="Description"
      description="Two or three sentences about the product."
      required
      messages={{ valueMissing: 'Describe the product.' }}
    >
      <Textarea name="description" placeholder="Hand-thrown in Bristol, glazed in moss." />
    </Field>
  );
}

import type { JSX } from 'react';
import { Textarea } from '@nizivo/react/textarea';

export function TextareaRowsExample(): JSX.Element {
  return (
    <div style={{ display: 'grid', gap: 12, maxInlineSize: 420 }}>
      <Textarea aria-label="Short note" placeholder="The 112 px minimum" />
      <Textarea rows={6} aria-label="Long note" placeholder="Six rows" />
    </div>
  );
}

import type { JSX } from 'react';
import { Field } from '@nizivo/react/field';
import { Textarea } from '@nizivo/react/textarea';

export function TextareaStatesExample(): JSX.Element {
  return (
    <div style={{ display: 'grid', gap: 16, maxInlineSize: 420 }}>
      <Field label="Care instructions" error="Keep it under 200 characters.">
        <Textarea defaultValue="Dishwasher safe. Microwave safe. Not for the oven." />
      </Field>
      <Field label="Supplier note" readOnly>
        <Textarea rows={2} defaultValue="Packed in recycled card." />
      </Field>
      <Field label="Internal note" disabled>
        <Textarea rows={2} defaultValue="Archived." />
      </Field>
    </div>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

TextareaProps type

import type { TextareaProps } from '@nizivo/react/textarea'

The props of Textarea, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-textarea.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• textarea: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

Source: a native <textarea> (textarea.client.tsx), which adds no key handling.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: none