Text Area

 1"use client";
 2
 3import * as React from "react";
 4import { Textarea } from "@/components/wensity/text-area";
 5
 6export function TextareaAutoGrow() {
 7  const [value, setValue] = React.useState(
 8    "Auto-grow keeps short notes compact, then expands until the configured maximum row count.",
 9  );
10
11  return (
12    <Textarea
13      label="Brief"
14      value={value}
15      onChange={(event) => setValue(event.target.value)}
16      autoResize
17      minRows={3}
18      maxRows={8}
19      hint="Try adding more lines; the field grows without layout jumps."
20    />
21  );
22}

 1import { Textarea } from "@/components/wensity/text-area";
 2
 3export function TextareaFilled() {
 4  return (
 5    <Textarea
 6      variant="filled"
 7      label="Internal note"
 8      defaultValue="The customer asked for workspace-level permissions before inviting the rest of the team."
 9      hint="Only visible to admins."
10      minRows={4}
11    />
12  );
13}

 1"use client";
 2
 3import * as React from "react";
 4import { Textarea } from "@/components/wensity/text-area";
 5
 6export function TextareaGhost() {
 7  const [value, setValue] = React.useState(
 8    "Turn this release summary into a short changelog for the customer portal.",
 9  );
10
11  return (
12    <Textarea
13      aria-label="AI prompt"
14      variant="ghost"
15      value={value}
16      onChange={(event) => setValue(event.target.value)}
17      showCount
18      maxLength={180}
19      minRows={4}
20      resize="none"
21    />
22  );
23}

 1import { Textarea } from "@/components/wensity/text-area";
 2
 3export function TextareaError() {
 4  return (
 5    <Textarea
 6      label="Reproduction steps"
 7      defaultValue="It broke."
 8      error="Add at least two clear steps so the team can reproduce it."
 9      minRows={4}
10    />
11  );
12}

 1"use client";
 2
 3import * as React from "react";
 4import { Textarea } from "@/components/wensity/text-area";
 5
 6export function TextareaCharacterCount() {
 7  const [value, setValue] = React.useState(
 8    "A compact component library for shipping premium app interfaces faster.",
 9  );
10
11  return (
12    <Textarea
13      label="Short bio"
14      value={value}
15      onChange={(event) => setValue(event.target.value)}
16      maxLength={110}
17      showCount
18      minRows={3}
19      resize="none"
20      hint="Keep it direct and useful."
21    />
22  );
23}

 1import { Textarea } from "@/components/wensity/text-area";
 2
 3export function TextareaReadonly() {
 4  return (
 5    <Textarea
 6      label="Generated summary"
 7      value="The workspace billing role changed from Member to Admin on June 16, 2026."
 8      readOnly
 9      minRows={3}
10      resize="none"
11    />
12  );
13}

 1import { Textarea } from "@/components/wensity/text-area";
 2
 3export function TextareaDisabled() {
 4  return (
 5    <Textarea
 6      label="Cancellation reason"
 7      defaultValue="Workspace was archived by an organization owner."
 8      disabled
 9      minRows={3}
10      resize="none"
11    />
12  );
13}