Textarea

A multi-line text input with character count and resize options.

Installation

bash

npx @smicolon/cli add textarea

Run init once per project before adding components. See Installation.

Preview

With Character Count

0/200

Resize Options

States

Props

Prop	Type	Default	Description
`variant`	`"default" \| "error"`	`"default"`	Visual style: default or error.
`resize`	`"none" \| "vertical" \| "horizontal" \| "both"`	`"vertical"`	Directions it can be resized in.
`showCount`	`boolean`	`false`	Shows a character counter.
`maxLength`	`number`	—	Maximum number of characters.
`placeholder`	`string`	—	Text shown while empty.
`disabled`	`boolean`	`false`	Disables the field and dims it.
`value`	`string`	—	Text value. Use it with `onChange`.
`onChange`	`(event) => void`	—	Called when the text changes.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

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

// Basic textarea
<Textarea placeholder="Type your message..." />

// With character count
<Textarea
  placeholder="Type here..."
  showCount
  maxLength={200}
/>

// Different resize options
<Textarea resize="none" />
<Textarea resize="vertical" />
<Textarea resize="both" />

// Error state
<Textarea variant="error" />