Textarea

Displays a form textarea or a component that looks like a textarea.

Basic Textarea

A simple textarea with label and description text.

Your message

Lorem ipsum dolor sit amet consectetur.

<Textarea
  label="Your message"
  placeholder="Type your message here"
  hint="Lorem ipsum dolor sit amet consectetur."
/>

Without Label

A plain textarea without a label.

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

Error State

Display validation errors to guide users.

Your message

Message is required

<Textarea
  label="Your message"
  placeholder="Type your message here"
  error="Message is required"
/>

Disabled State

Disable the textarea when it should not be interactive.

Your messageCannot edit this

<Textarea label="Your message" value="Cannot edit this" disabled />

Web3 Examples

Common textarea patterns for blockchain applications.

Contract Description

Provide a brief description for your deployed contract

Transaction Memo

Memos are stored on-chain and visible to all parties

<div className="flex flex-col gap-4 w-[400px]">
  <Textarea
    label="Contract Description"
    placeholder="Describe your smart contract..."
    hint="Provide a brief description for your deployed contract"
  />
  <Textarea
    label="Transaction Memo"
    placeholder="Add an optional memo to your transaction..."
    hint="Memos are stored on-chain and visible to all parties"
  />
</div>

API Reference

Prop	Type	Default	Description
label	string	—	Label text displayed above the textarea
error	string	—	Error message displayed below the textarea
hint	string	—	Helper text displayed below the textarea when no error
placeholder	string	—	Placeholder text shown when textarea is empty
disabled	boolean	false	Disables the textarea
rows	number	—	Number of visible text lines

Accessibility

The Textarea component is built with accessibility in mind:

• Labels are properly associated with textareas via htmlFor
• Error messages use aria-describedby for screen readers
• Invalid textareas have aria-invalid="true"
• Focus states are clearly visible for keyboard navigation
• Textarea is resizable by default for user comfort