Textarea

A multi-line input. The vertical counterpart of <TextField> — same bridge wiring, same label/helper/error chrome, plus rows and resize controls. Use it for any free-text field longer than a typical single-line value (notes, descriptions, paste areas).

import { Textarea } from '@dashforge/tw';

<Textarea name="bio" label="Tell us about yourself" rows={4} />

Quick Start

import { DashForm } from '@dashforge/forms';
import { Textarea, Button } from '@dashforge/tw';

<DashForm onSubmit={onSubmit}>
  <Textarea
    name="message"
    label="Your message"
    rows={6}
    required
    rules={{ minLength: { value: 20, message: 'At least 20 characters' } }}
  />
  <Button type="submit" color="primary">Send</Button>
</DashForm>

Standalone:

const [value, setValue] = useState('');
<Textarea
  name="notes"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

Examples

import { Textarea } from '@dashforge/tw';

<Textarea
  name="bio"
  label="Short bio"
  placeholder="A few sentences about yourself…"
  rows={4}
  helperText="Markdown is supported."
/>

Sizes + rows

<Textarea size="sm" rows={2} />     {/* compact, 2 lines visible */}
<Textarea size="md" rows={4} />     {/* default */}
<Textarea size="lg" rows={8} />     {/* spacious, hero forms */}

rows controls the visible line count (= <textarea rows> HTML attribute). Default is 3.

Resize control

import { Textarea, Stack } from '@dashforge/tw';

<Stack gap={3}>
  <Textarea
    name="vertical"
    label='resize="vertical" (default)'
    rows={3}
    defaultValue="Drag the bottom-right corner to grow taller."
  />
  <Textarea
    name="none"
    label='resize="none"'
    rows={3}
    resize="none"
    defaultValue="Locked size — no drag handle."
  />
</Stack>

<Textarea resize="vertical" />   {/* default — user can drag-resize bottom edge */}
<Textarea resize="none" />       {/* locked at `rows` size */}
<Textarea resize="both" />       {/* horizontal + vertical (rare) */}
<Textarea resize="horizontal" /> {/* rare */}

Vertical-only is the sane default. none for fixed-frame layouts (cards with strict heights).

With helper + error

<Textarea
  name="bio"
  label="Bio"
  helperText="Markdown supported. Keep it under 280 characters for the preview to look right."
  rows={4}
/>

<Textarea
  name="bio"
  label="Bio"
  error
  helperText="Bio is required to publish."
/>

Reactive visibility

<RadioGroup name="contactPref" options={[{value:'email'},{value:'detail'}]} />
<Textarea
  name="contactDetail"
  label="Tell us more"
  visibleWhen={(engine) => engine.getNode('contactPref')?.value === 'detail'}
  rows={5}
  required
/>

RBAC gating

<Textarea
  name="adminNote"
  label="Internal note"
  rows={3}
  access={{ requires: 'workspace.admin', when: 'denied:readonly' }}
/>

Three when modes ('denied:hide' | 'denied:disable' | 'denied:readonly') — same semantics as TextField.

Theme defaults

Configure <Textarea> defaults application-wide.

import { patchTheme } from '@dashforge/tw-theme';

patchTheme({
  components: {
    Textarea: {
      defaults: { size: 'md', layout: 'stacked', resize: 'vertical', fullWidth: true },
    },
  },
});

Configurable axes (TextareaVariantProps):

Non-visual axes (name, rules, label, helperText, error, disabled, access, visibleWhen, event handlers, rows) are not theme-configurable — they carry per-instance semantics.

Precedence chain (lowest → highest):

1. defaultVariants from the internal textareaVariants recipe.
2. theme.components.Textarea.defaults (application-wide).
3. Instance prop (<Textarea size="lg" resize="none" />) — wins over theme.
4. sx — appended to the root and wins over conflicting classes via tailwind-merge.

TypeScript: theme.components.Textarea.defaults autocompletes to the four axes above.

Reactivity: useComponentDefaults('Textarea') subscribes to the theme store — patchTheme at runtime re-renders every mounted <Textarea> inheriting the changed axis.

API

Props

Slots & slotProps

<Textarea> is a compound component with 7 named slots. Each slot accepts a { className?: string } override via slotProps:

For root-level class overrides that don't need a specific slot, use sx — it's appended to the root and wins over conflicting classes via tailwind-merge. Use slotProps when you need to reach a specific inner element (e.g. the bordered inputWrapper, or errorText color).

Notes

• Native <textarea> under the hood — maxLength, cols, wrap, spellCheck etc. pass through via rest props.
• No autosize behavior built-in (would need a useResizeObserver-style hook). For autosizing, set rows to a sensible cap and pair with maxLength; or wrap in a custom container.
• resize="vertical" (default) follows browser conventions and avoids the "stretchy" feeling of both that confuses non-technical users.