Textarea

Multi-line text input field. Styled with OpenCosmos UI tokens.

Installation

# Install @opencosmos/ui to use Textarea
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

placeholder— Placeholder text

disabled— Disables the textarea

Usage

Import

import { Textarea } from '@opencosmos/ui';

Example

<Textarea>
  Content
</Textarea>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
placeholder	text	"Type your message here."	Placeholder text
disabled	boolean	false	Disables the textarea

Examples

Default

Disabled

With Label

Code Examples

Basic Usage

Simple textarea

import { Textarea } from "@opencosmos/ui"

<Textarea placeholder="Type your message here." />

With Label

Textarea with a label

import { Label } from "@opencosmos/ui"
import { Textarea } from "@opencosmos/ui"

<div className="grid w-full gap-1.5">
  <Label htmlFor="message">Your message</Label>
  <Textarea placeholder="Type your message here." id="message" />
</div>