Textarea

Multi-line text input styled automatically by @primus/ui-core.

Preview · Textarea

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:340px">
  <label>Notes <textarea rows="4" placeholder="Add notes about this tenant..."></textarea></label>
  <div data-field="error">
    <label>Description <textarea rows="3" aria-invalid="true"></textarea></label>
    <span class="error">Description is required.</span>
  </div>
</div>

React

import { PrimusTextarea } from 'primus-react-ui';

<PrimusTextarea label="Notes" placeholder="Add notes..." rows={4} />
<PrimusTextarea label="Description" error="Description is required." rows={3} />

Angular

<primus-textarea label="Notes" placeholder="Add notes..." [rows]="4"
  (valueChange)="onNotes($event)">
</primus-textarea>
<primus-textarea label="Description" error="Description is required." [required]="true">
</primus-textarea>

Props

Prop	Type	Default	Description
label	string	—	Label text
rows	number	3	Visible rows
error	string	—	Error message
disabled	boolean	false	Disabled

Accessibility

• Always associate a <label> — do not use placeholder as the only label
• maxlength attribute is announced by some screen readers; pair with a visible character count
• Error state sets aria-invalid="true" and links error text via aria-describedby
• Resize handle is keyboard-accessible in modern browsers

Version history

See the Changelog for version history and breaking changes.