On this page

Textarea

    ---
    import { Textarea } from "@/components/starwind/textarea";
    ---

    <Textarea placeholder="Type something..." />

import { Textarea } from "@/components/starwind/textarea";

export function Example() {
  return (
    <>
      <Textarea placeholder="Type something..." />
    </>
  );
}

Installation

pnpx starwind@latest add textarea

npx starwind@latest add textarea

yarn dlx starwind@latest add textarea

Framework Availability

Astro Available React Available

Textarea is available for Astro and React.

Usage

size

---
import { Textarea } from "@/components/starwind/textarea";
---

<Textarea size="sm" placeholder="Small textarea" />
<Textarea size="md" placeholder="Medium textarea" />
<Textarea size="lg" placeholder="Large textarea" />

disabled

---
import { Textarea } from "@/components/starwind/textarea";
---

<Textarea disabled placeholder="Disabled textarea" />

API Reference

Styled Component API

These props are added or materially changed by the installed Astro styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Follow the Primitive and Runtime links for lower-level behavior props.

Textarea

Inherits textarea attributes. Omits `children`.

Contains the following additional props:

Prop Type Default

size "sm" | "md" | "lg" "md"

Description: Selects the component's visual size.
Classification: Styled variant

Changelog

v1.4.0

Added contract-generated Astro and React implementations while preserving the component’s existing public API and styling.

v1.3.3

Refactor tailwind variants functions into separate variants.ts file

v1.2.2

Refactor tailwind variants functions into separate variants.ts file

v1.2.1

add aria-invalid styling

v1.2.0

Add a data-slot attribute to all components to enable global styling updates

v1.1.1

Adjust component to use type VariantProps from tailwind-variants. This provides greater type safety and cleans up component frontmatter.

v1.1.0

tailwind-variants now implemented. This uses tailwind-merge under the hood to merge Tailwind classes without style conflicts, allowing you to override any existing classes using the “class” prop.