CSSN'T Components 1.0

subject

Textarea

Multi-line input for longer text.

Textarea Examples

Copy-ready examples with live previews.

Basic usage

Controlled usage via value + onChange.

Live preview

Basic (controlled)

import { useState } from "react";
import Textarea from "@/packages/ui/src/_components/forms/textarea/Textarea";

export default function Example() {
  const [value, setValue] = useState("");

  return (
    <Textarea
      name="about"
      label="About you"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Write something..."
      rows={4}
    />
  );
}

Variants

Outlined (default) and filled.

Live preview

Outlined (default)

import { useState } from "react";
import Textarea from "@/packages/ui/src/_components/forms/textarea/Textarea";

export default function Example() {
  const [value, setValue] = useState("Outlined textarea");

  return (
    <Textarea
      name="outlined"
      label="Outlined"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      rows={3}
    />
  );
}

Live preview

Filled

import { useState } from "react";
import Textarea from "@/packages/ui/src/_components/forms/textarea/Textarea";

export default function Example() {
  const [value, setValue] = useState("Filled textarea");

  return (
    <Textarea
      name="filled"
      label="Filled"
      variant="filled"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      rows={3}
    />
  );
}

Icon + helper text

Leading content and extraText with semantic states.

Live preview

Max 200 characters

0/200

Filled + icon + helper

import { useState } from "react";
import Textarea from "@/packages/ui/src/_components/forms/textarea/Textarea";

export default function Example() {
  const [value, setValue] = useState("");

  return (
    <Textarea
      name="notes"
      label="Notes"
      variant="filled"
      iconContent={<Icon name={"book"}></Icon>}
      value={value}
      onChange={(e) => setValue(e.target.value)}
      extraText="Max 200 characters"
      extraTextState="support"
      maxLength={200}
    />
  );
}

Live preview

Saved successfully

This field is required

Success + error helper states

import { useState } from "react";
import Textarea from "@/_components/forms/textarea/Textarea";

export default function Example() {
  const [okValue, setOkValue] = useState("Looks good");
  const [errorValue, setErrorValue] = useState("");

  return (
    <>
      <Textarea
        name="summary_ok"
        label="Summary"
        value={okValue}
        onChange={(e) => setOkValue(e.target.value)}
        extraText="Saved successfully"
        extraTextState="success"
        rows={3}
      />

      <Textarea
        name="summary_error"
        label="Summary"
        value={errorValue}
        onChange={(e) => setErrorValue(e.target.value)}
        extraText="This field is required"
        extraTextState="error"
        required
        rows={3}
      />
    </>
  );
}

Readonly / disabled

Use editState to control interactivity.

Live preview

Readonly and disabled

import Textarea from "@/_components/forms/textarea/Textarea";

export default function Example() {
  return (
    <>
      <Textarea
        name="readonly"
        label="Readonly"
        value="Read-only content"
        editState="readonly"
      />

      <Textarea
        name="disabled"
        label="Disabled"
        value="Disabled content"
        editState="disabled"
      />
    </>
  );
}

Rows / cols

Pass native textarea sizing attributes.

Live preview

rows and cols

import { useState } from "react";
import Textarea from "@/_components/forms/textarea/Textarea";

export default function Example() {
  const [value, setValue] = useState("First line
Second line");

  return (
    <>
      <Textarea
        name="rows_a"
        label="rows=3"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        rows={3}
      />

      <Textarea
        name="rows_b"
        label="rows=6 cols=28"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        rows={6}
        cols={28}
      />
    </>
  );
}

On this page

Textarea Props

Textarea — Props
PropTypeRequiredDefaultDescription
namestringNo—Used for id, name, and htmlFor. Prefer a stable, unique value.
labelstringNo—Floating label text.
valuestringNo—Current value of the textarea (controlled).
onChange(e: React.ChangeEvent<HTMLTextAreaElement>) => voidNo—Change handler for controlled usage.
placeholderstringNo" "Placeholder text. If not provided, a single-space placeholder is used to enable the floating label pattern.
variant"filled" | "outlined"No"outlined"Visual style (cssnt-textarea--filled/outlined).
iconContentstring | React.ReactNodeNo—If provided, renders a leading icon/content and sets has-icon-start on the root.
requiredbooleanNofalseAdds required on the textarea and required class on the label.
editState"disabled" | "readonly" | "free"No"free"Controls interactivity: disabled sets disabled, readonly sets readOnly, free enables editing. Note: both disabled and readonly map to is-disabled root class.
extraTextstringNo—Helper/extra text rendered under the textarea when provided.
extraTextState"support" | "success" | "error"No"support"Helper text style class (cssnt-textarea-support/success/error).
rowsnumberNo—Native rows attribute.
colsnumberNo—Native cols attribute.
maxLengthnumberNo—Native maxLength attribute.