Textarea

import { Textarea } from "@grassroot/ui-react";
 
export default function TextareaDemo() {
  return (
    <div className="flex flex-col gap-3.5">
      <Textarea
        label="Engagement brief"
        placeholder="Describe the work…"
        hint="Markdown supported."
      />
      <Textarea label="Summary" showCount maxLength={600} defaultValue="…" />
      <Textarea label="Notes" error="Brief is required." />
    </div>
  );
}

<script setup lang="ts">
import { Textarea } from "@grassroot/ui-vue";
</script>
 
<template>
  <div class="flex flex-col gap-3.5">
    <Textarea
      label="Engagement brief"
      placeholder="Describe the work…"
      hint="Markdown supported."
    />
    <Textarea label="Summary" show-count :max-length="600" default-value="…" />
    <Textarea label="Notes" error="Brief is required." />
  </div>
</template>

import { Component } from "@angular/core";
import { GrassrootTextarea } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-textarea-demo",
  standalone: true,
  imports: [GrassrootTextarea],
  host: { style: "display: contents" },
  template: `
    <div class="flex flex-col gap-3.5">
      <grassroot-textarea
        label="Engagement brief"
        placeholder="Describe the work…"
        hint="Markdown supported."
      />
      <grassroot-textarea label="Summary" [showCount]="true" [maxLength]="600" defaultValue="…" />
      <grassroot-textarea label="Notes" error="Brief is required." />
    </div>
  `,
})
export class TextareaDemoComponent {}
 
export default TextareaDemoComponent;

<script lang="ts">
  import { Textarea } from "@grassroot/ui-svelte";
</script>
 
<div class="flex flex-col gap-3.5">
  <Textarea label="Engagement brief" placeholder="Describe the work…" hint="Markdown supported." />
  <Textarea label="Summary" showCount maxLength={600} defaultValue="…" />
  <Textarea label="Notes" error="Brief is required." />
</div>

/** @jsxImportSource solid-js */
import { Textarea } from "@grassroot/ui-solid";
 
export default function TextareaDemo() {
  return (
    <div class="flex flex-col gap-3.5">
      <Textarea
        label="Engagement brief"
        placeholder="Describe the work…"
        hint="Markdown supported."
      />
      <Textarea label="Summary" showCount maxLength={600} defaultValue="…" />
      <Textarea label="Notes" error="Brief is required." />
    </div>
  );
}