Textarea

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

Installation

bash

npx @smicolon/fasla-ui@latest 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

Basic textarea

tsx

"use client"

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

export function MessageField() {
  return (
    <Textarea
      name="message"
      aria-label="Message"
      placeholder="Type your message..."
    />
  )
}

With character count

tsx

"use client"

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

export function MessageFieldWithCount() {
  return (
    <Textarea
      name="message"
      aria-label="Message"
      placeholder="Type here..."
      showCount
      maxLength={200}
    />
  )
}

Different resize options

tsx

"use client"

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

export function MessageFieldResize() {
  return (
    <div className="flex flex-col gap-4">
      <Textarea aria-label="Message" resize="none" />
      <Textarea aria-label="Message" resize="vertical" />
      <Textarea aria-label="Message" resize="both" />
    </div>
  )
}

Error state

tsx

"use client"

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

export function MessageFieldWithError() {
  return <Textarea name="message" aria-label="Message" variant="error" aria-invalid />
}