Textarea

Textarea

The Textarea component allows users to enter and edit multi-line text. It supports different sizes, visual variants, semantic colors, and resize behaviors.

import Textarea from "rocksolidjs/Textarea";

export default function Example() {
  return (
    <Textarea
      placeholder="Tell us what you think..."
      aria-label="Feedback"
    />
  );
}

Examples

Colors

Use the color prop to communicate the semantic state of the textarea.

import Textarea from "rocksolidjs/Textarea";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <Textarea
        color="default"
        placeholder="Default feedback"
        aria-label="Default feedback"
      />
      <Textarea
        color="success"
        value="Your response has been saved successfully."
        aria-label="Success message"
      />
      <Textarea
        color="warning"
        placeholder="Add any important details..."
        aria-label="Warning"
      />
      <Textarea
        color="info"
        value="Additional information is required for this request."
        aria-label="Information"
      />
      <Textarea
        color="error"
        placeholder="Please explain what went wrong"
        aria-label="Error details"
      />
    </div>
  );
}

Variants

Use the variant prop to control the visual style of the textarea.

import Textarea from "rocksolidjs/Textarea";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <Textarea
        variant="filled"
        placeholder="Write a detailed description..."
        aria-label="Filled textarea"
      />
      <Textarea
        variant="outlined"
        placeholder="Write a detailed description..."
        aria-label="Outlined textarea"
      />
      <Textarea
        variant="ghost"
        placeholder="Write a detailed description..."
        aria-label="Ghost textarea"
      />
    </div>
  );
}

Sizes

Use the size prop to control the size of the textarea.

import Textarea from "rocksolidjs/Textarea";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <Textarea
        size="small"
        placeholder="Short message"
        aria-label="Small textarea"
      />
      <Textarea
        size="medium"
        placeholder="Describe your request..."
        aria-label="Medium textarea"
      />
      <Textarea
        size="large"
        placeholder="Tell us more about your project..."
        aria-label="Large textarea"
      />
    </div>
  );
}

Resize

Use the resize prop to control how the textarea can be resized.

import Textarea from "rocksolidjs/Textarea";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <Textarea
        resize="none"
        placeholder="This textarea cannot be resized."
        aria-label="No resize"
      />
      <Textarea
        resize="x"
        placeholder="Resize this textarea horizontally."
        aria-label="Horizontal resize"
      />
      <Textarea
        resize="y"
        placeholder="Resize this textarea vertically."
        aria-label="Vertical resize"
      />
      <Textarea
        resize="both"
        placeholder="Resize this textarea in either direction."
        aria-label="Horizontal and vertical resize"
      />
    </div>
  );
}

The available resize values are:

  • x — Allows horizontal resizing.
  • y — Allows vertical resizing.
  • both — Allows horizontal and vertical resizing.
  • none — Prevents resizing.

Full Width

Use the fullWidth prop to make the textarea fill the available horizontal space.

import Textarea from "rocksolidjs/Textarea";

export default function Example() {
  return (
    <div class="w-full">
      <Textarea
        fullWidth
        placeholder="Enter your delivery instructions..."
        aria-label="Delivery instructions"
      />
    </div>
  );
}

Disabled

Use the disabled prop to prevent users from interacting with the textarea.

import Textarea from "rocksolidjs/Textarea";

export default function Example() {
  return (
    <Textarea
      disabled
      value="This response is no longer editable."
      aria-label="Disabled response"
    />
  );
}

Input

Use the onInput prop to respond when the textarea value changes through user input.

import { createSignal } from "solid-js";
import Textarea from "rocksolidjs/Textarea";

export default function Example() {
  const [message, setMessage] = createSignal("");

  return (
    <div class="flex flex-col gap-2">
      <Textarea
        value={message()}
        placeholder="Write a message..."
        aria-label="Message"
        onInput={(event: InputEvent) => (
          setMessage((event.currentTarget as HTMLTextAreaElement).value)
        )}
      />

      <p class="text-sm text-muted-foreground">
        {message().length} characters
      </p>
    </div>
  );
}

Accessibility

  • Provide a descriptive label for the textarea.
  • Use placeholder text only as supporting information, not as a replacement for a label.
  • Provide accessible error or validation messages when the textarea is invalid.
  • Do not rely on color alone to communicate validation or status.
  • Ensure disabled and interactive states have sufficient contrast.
  • Make sure the textarea can be accessed and operated using a keyboard.

API

Textarea

The Textarea component supports custom styling, semantic colors, multiple sizes and variants, resize behavior, disabled states, and input event handling.

Prop Type Required Default Description
class string No — Custom CSS class applied to the textarea.
color "default" | "success" | "warning" | "info" | "error" No "default" Sets the semantic color of the textarea.
disabled boolean No false Disables the textarea and prevents user interaction.
fullWidth boolean No false Makes the textarea fill the available width.
onInput (event: InputEvent) => void No — Called when the textarea value changes through user input.
resize "x" | "y" | "both" | "none" No "y" Controls the direction in which the textarea can be resized.
size "small" | "medium" | "large" No "medium" Controls the size of the textarea.
value string No — Sets the current value of the textarea.
variant "filled" | "outlined" | "ghost" No "outlined" Controls the visual style of the textarea.
  • Input — Use Input for single-line text entry.