Textarea

import { Textarea } from "@grassroot/ui-react";
 
<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." />

<script setup lang="ts">
import { Textarea } from "@grassroot/ui-vue";
</script>
 
<template>
  <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." />
</template>

import { Component } from "@angular/core";
import { GrassrootTextarea } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootTextarea],
  template: `
    <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." />
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Textarea } from "@grassroot/ui-svelte";
</script>
 
<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." />

import { Textarea } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <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." />
    </>
  );
}