Component

Textarea

A multi-line text input with size variants, placeholder, and disabled/read-only states. Uses the headless @refraction-ui/textarea core.

Sizes

Three size variants for different contexts.

Small

Default

Large

Installation

$pnpm add @refraction-ui/react-textarea

Usage

tsx

import { Textarea } from '@refraction-ui/react-textarea'

export function MyComponent() {
  return (
    <div className="space-y-4">
      <Textarea placeholder="Enter your message..." />
      <Textarea size="lg" rows={5} />
      <Textarea disabled placeholder="Disabled" />
    </div>
  )
}

States

Placeholder, disabled, and read-only states.

Placeholder

Disabled

Read Only

This content is read only.

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	Size of the textarea.
`disabled`	`boolean`	`false`	Disables the textarea.
`readOnly`	`boolean`	`false`	Makes the textarea read-only.
`maxRows`	`number`	--	Maximum number of visible rows.
`className`	`string`	--	Additional CSS classes to apply.