Components

DhTextArea

Multi-line Material 3 outlined field with floating label, isError / isSuccess states, auto-grow, maxRows, and resize modes.

Open in Figma

Floating label 

<DhTextArea bind:value={note} label="Note" rows={3} />

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}
  isError={bio.length > 160}
  supportingText={bio.length > 160 ? 'Keep it under 160 characters.' : 'Up to 160 characters.'}
/>

Validation states

Thanks for the detail.

<DhTextArea
  bind:value={feedback}
  label="Feedback"
  isSuccess={feedback.trim().length > 0}
  supportingText="Thanks for the detail."
/>

Numeric keyboard

inputmode hints the on-screen keyboard for multi-line numeric entry, like a list of amounts or readings.

<DhTextArea
  bind:value={amounts}
  label="Amounts"
  inputmode="decimal"
  rows={3}
/>

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 />

In a form

Max 280 characters.

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