Forms

Textarea

A multi-line text field with the same frame as Input. Works inside a Field like every kit control.

Message

Grows as you type.

demos/textarea.tsx

import { Field } from "pixelbits/field";
import { Textarea } from "pixelbits/textarea";

export default function Demo() {
  return (
    <Field label="Message" description="Grows as you type." className="w-full max-w-sm">
      <Textarea autoResize placeholder="Tell us about the project…" />
    </Field>
  );
}

Installation

npm: import

import { Textarea } from "pixelbits/textarea";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/textarea.json

API

<Textarea>

A multi-line text field with the same frame as Input. Works inside a Field like every kit control.

Example

<Field label="Message">
  <Textarea autoResize rows={3} placeholder="Tell us about the project…" />
</Field>

Prop	Type	Default	Description
autoResize	boolean	false	Grow with the content (CSS `field-sizing: content`, no JavaScript), between `rows` and `maxRows`.
maxRows	number	12	With `autoResize`, the height stops growing at this many rows and scrolls.

Also accepts every prop of TextareaHTMLAttributes<HTMLTextAreaElement>.