Component

Textarea

Resizable multi-line text field.

npx -y github:anwarlemu/agentcard-brand-cli#release add textarea

textarea.preview

What should your agent buy?

A sentence or two is plenty.

Usage

use-it-for.md

Use inside Field for messages, notes and other longer input. Connect value and onChange when the form owns the state.

never.md

Rounded corners
Gray fills
Resizing sideways

Dependencies: field.

Example

examples/textarea.tsx

import { Field } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

export function Site() {
  return (
    <div className="grid max-w-170 gap-4">
      <Field label="What should your agent buy?" htmlFor="textarea-brief" help="A sentence or two is plenty.">
        <Textarea id="textarea-brief" placeholder="Book flights and hotels for the sales team" />
      </Field>
    </div>
  );
}

Source

components/ui/textarea.tsx

"use client";

import * as React from "react";

import { useFieldControl } from "@/components/ui/field";
import { cn } from "@/lib/utils";

// The brand's multi-line field (the get-started form, .v7-gate-field textarea): the input's square box, 35 percent ink
// border, 18px Inter and 10px by 12px of padding, at least 84px tall and growing only downward; focus is the form's 2px
// blue outline laid over the border.
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "flex min-h-21 w-full resize-y rounded-none border border-line-strong bg-surface px-3 py-2.5 font-sans text-h5 leading-snug text-fg outline-none placeholder:text-fg-faint focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-solid focus-visible:outline-focus-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-danger",
        className,
      )}
      {...useFieldControl(props)}
    />
  );
}

export { Textarea };

Reference: live https://www.agentcard.sh/get-started (.v7-gate-field textarea).