Components

DhTextArea

Multi-line text input with auto-grow, maxRows, and resize modes.

Open in Figma

Sizes

<DhTextArea bind:value={note} size="sm" label="Small" />
<DhTextArea bind:value={note} size="md" label="Medium (default)" />
<DhTextArea bind:value={note} size="lg" label="Large" />

Auto-grow

Grows with content; add maxRows to cap and switch to scrolling.

Up to 160 characters.

<DhTextArea
  bind:value={bio}
  label="Bio"
  autoGrow
  maxRows={6}
  helperText="Up to 160 characters."
/>

Fixed rows, resize

<DhTextArea rows={2} resize="vertical" />
<DhTextArea rows={3} resize="none" />

States

<DhTextArea label="Empty" placeholder="Type something" />
<DhTextArea value="Filled content" label="Filled" />
<DhTextArea value="Cannot change" label="Readonly" readonly />
<DhTextArea value="" label="Disabled" placeholder="Inactive" disabled />
<DhTextArea value="too long" label="Error" errorText="This value is not allowed." />

In a form

Max 280 characters.

<form>
  <DhTextArea bind:value={capped} label="Comment" maxlength={280}
    helperText="Max 280 characters." required autoGrow maxRows={5} />
  <DhButton type="submit" variant="primary" text="Post" />
</form>