Docs

Textarea

A multi-line text field. Thin, presentational wrapper around a native <textarea>, so all native attributes (value, rows, onChange, placeholder, disabled, …) pass straight through.

Colors

Sizes

Real use · review with a live character count

49 / 200

Using Textarea

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Textarea — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class textarea, with 13 modifiers:

  • .textarea
  • .textarea-accent
  • .textarea-error
  • .textarea-info
  • .textarea-lg
  • .textarea-md
  • .textarea-neutral
  • .textarea-primary
  • .textarea-secondary
  • .textarea-sm
  • .textarea-success
  • .textarea-warning
  • .textarea-xl
  • .textarea-xs

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react
import { Textarea } from "@wizeworks/silicaui-react";

Props

PropTypeRequiredDescription
colorTextareaColornoAccent color; maps to textarea-<color> (border + focus ring).
sizeTextareaSizenoDefault md.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source
import { useState } from "react";
import { Textarea } from "@wizeworks/silicaui-react";
import { Section, Row, Stack } from "../lib/Section";
import { SIZES } from "../lib/data";

export function TextareaDemo() {
    const [note, setNote] = useState(
        "Shipping was fast and the packaging held up well.",
    );
    const max = 200;

    return (
        <>
            <Section title="Colors">
                <Stack className="max-w-md">
                    <Textarea placeholder="Default textarea — drag the corner to resize" />
                    <Textarea
                        color="primary"
                        defaultValue="Primary accent — border and focus ring."
                    />
                    <Textarea color="success" placeholder="Success" />
                    <Textarea color="error" placeholder="Error" />
                    <Textarea color="brand" placeholder="Brand accent" rows={2} />
                    <Textarea disabled defaultValue="Disabled" />
                </Stack>
            </Section>

            <Section title="Sizes">
                <Row>
                    {SIZES.map((size) => (
                        <Textarea key={size} size={size} placeholder={size} rows={2} />
                    ))}
                </Row>
            </Section>

            <Section title="Real use · review with a live character count">
                <div className="max-w-sm rounded-box border border-base-300 bg-base-100 p-5 shadow-sm">
                    <div className="flex flex-col gap-1.5">
                        <label className="text-sm font-medium">Your review</label>
                        <Textarea
                            color={note.length > max ? "error" : "primary"}
                            value={note}
                            onChange={(e) => setNote(e.target.value)}
                            rows={3}
                        />
                        <span
                            className={`self-end text-xs ${
                                note.length > max ? "text-error" : "opacity-60"
                            }`}
                        >
                            {note.length} / {max}
                        </span>
                    </div>
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Textarea — a multi-line <textarea>; text/children are its value. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors
import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Textarea", "textarea", { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "textarea textarea-primary" rather than passing a colour as a prop.

Takes children
no
Hydrated by
nothing — this one is static markup

The full API for Textarea, on every path, is available through the Silica MCP server.