Textarea

The multi-line sibling of Input. Same variants, same padding rule, with a resize control and no icon slot.

src/components/ui/textarea.tsx

About

From the component's own source, where it was written.

The multi-line sibling of Input, and monochrome for the same reason.

It styles the <textarea> directly rather than wrapping it: there is no icon slot to place and no padding to click past, so a wrapper would add nothing. Padding follows the same rule as a field — the leading side is the vertical inset plus 4px — with the vertical inset applied literally, since height here is content-driven rather than fixed.

Install

npx astralyx-ui add textarea

Usage

import { Textarea } from '@/components/ui/textarea'

<Textarea placeholder="Tell us what happened" rows={4} />

Composer

Change the props and the source below follows.

Props

variant

size

autoResize

resize

rows

placeholder

errordisabled

tsx

<Textarea
  placeholder="Tell us what happened"
/>

Examples

Variants

tsx

<Textarea placeholder="Default" />
<Textarea variant="secondary" placeholder="Secondary" />
<Textarea variant="ghost" placeholder="Ghost" />

Sizes

tsx

<Textarea size="sm" />
<Textarea size="default" />
<Textarea size="lg" />

Auto resize

tsx

<Textarea
  autoResize
  rows={2}
  placeholder="Type — the field grows to fit"
/>

States

tsx

<Textarea error aria-label="Bio" defaultValue="Too short" />
<Textarea disabled aria-label="Bio" defaultValue="Disabled" />
<Textarea readOnly aria-label="Bio" defaultValue="Read only" />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Textarea`

Extends Omit<ComponentProps<'textarea'>, 'size'>.

Prop	Type	Default	Description
error	boolean	false	The only colour the component takes: a red border. Also sets aria-invalid.
variant	'default' \| 'secondary' \| 'ghost'	'default'	Bordered, filled, or no chrome until hover.
size	'sm' \| 'default' \| 'lg'	'default'	Minimum height, padding, text size and corner radius.
resize	'vertical' \| 'none' \| 'both'	'none'	Which directions the user can drag in. The native grip is never drawn — it cannot be styled and clashes with the rounded corner.
autoResize	boolean	false	Grows with the content instead of scrolling. Forces resize="none" and hides the overflow.

Functions

Function	Signature	Description
textareaVariants	(props?: { variant?: 'default' \| 'secondary' \| 'ghost'; size?: 'sm' \| 'default' \| 'lg'; resize?: 'vertical' \| 'none' \| 'both'; error?: boolean }) => string	The multi-line sibling of Input, and monochrome for the same reason.