Textarea

A styled multi-line text input.

import { BuiTextarea } from 'ng-blatui';

<textarea buiTextarea placeholder="Type your message here."></textarea>

With label

Your message

<label buiLabel for="msg">Your message</label>
<textarea id="msg" buiTextarea placeholder="Type your message here."></textarea>

With text

Your message

Your message will be shared with the support team.

<label buiLabel for="msg">Your message</label>
<textarea id="msg" buiTextarea placeholder="…"></textarea>
<p class="text-muted-foreground text-sm">Your message will be shared with support.</p>

With button

Your message

<label buiLabel for="msg">Your message</label>
<textarea id="msg" buiTextarea placeholder="…"></textarea>
<button buiButton class="w-fit">Send message</button>

Character count

Your feedback

0/200

<textarea
  buiTextarea maxlength="200"
  (input)="len.set($any($event.target).value.length)"
></textarea>
<p class="text-right text-xs tabular-nums">{{ len() }}/200</p>

Invalid

Bio

Bio must be at least 10 characters.

<textarea buiTextarea aria-invalid="true" placeholder="…"></textarea>
<p class="text-destructive text-sm" role="alert">Bio must be at least 10 characters.</p>

No resize

<textarea buiTextarea class="resize-none" placeholder="Can't be resized."></textarea>

Read only

This content is read-only and cannot be edited.

<textarea buiTextarea readonly class="bg-muted" aria-label="Read-only">…</textarea>

Disabled

<textarea buiTextarea placeholder="…" disabled></textarea>

Utility class

<!-- a native textarea styled with utility classes -->
<textarea rows="3" class="w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"></textarea>