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..." />
    </>
  );
}

<script setup lang="ts">
import { Textarea } from "@/components/starwind/textarea";
</script>

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

Installation

pnpx starwind@latest add textarea --framework astro

npx starwind@latest add textarea --framework astro

yarn dlx starwind@latest add textarea --framework astro

pnpx starwind@latest add textarea --framework react

npx starwind@latest add textarea --framework react

yarn dlx starwind@latest add textarea --framework react

pnpx starwind@latest add textarea --framework vue

npx starwind@latest add textarea --framework vue

yarn dlx starwind@latest add textarea --framework vue

Usage

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

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

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

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

<script setup lang="ts">
import { Textarea } from "@/components/starwind/textarea";
</script>

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

Sizes

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

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

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

export function Example() {
  return (
    <>
      <Textarea size="sm" placeholder="Small textarea" />
      <Textarea size="md" placeholder="Medium textarea" />
      <Textarea size="lg" placeholder="Large textarea" />
    </>
  );
}

<script setup lang="ts">
import { Textarea } from "@/components/starwind/textarea";
</script>

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

Disabled

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

<Textarea disabled placeholder="Disabled textarea" />

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

export function Example() {
  return (
    <>
      <Textarea disabled placeholder="Disabled textarea" />
    </>
  );
}

<script setup lang="ts">
import { Textarea } from "@/components/starwind/textarea";
</script>

<template>
  <Textarea disabled placeholder="Disabled textarea" />
</template>

API Reference

Styled Component API

These props are added or materially changed by the installed styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Expand a prop to see named type definitions and framework-specific imports. 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

View version history v1.4.0 7 releases

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.