Textarea

import { BuiTextarea } from 'ng-blatui';

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

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

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

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

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

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

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

<!-- auto-grows, then scrolls past 4 rows -->
<textarea buiTextarea [maxRows]="4" placeholder="Grows up to 4 rows…"></textarea>

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

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

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