Textarea

Multi-line field that can grow with its content and count characters against maxLength.

Source: 1 file
Dependencies: none
Playground: yes

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

01Basic

<Textarea placeholder="…" />

02Variant

<Textarea variant="default | filled | ghost" />

03Size

<Textarea size="sm | md | lg" />

04Auto-resize

<Textarea resize="auto" maxRows={6} />

05Counter

0/120

<Textarea showCount maxLength={120} />

06States

Bio

Bio must be at least 20 characters.

<Textarea invalid /> · <Textarea disabled />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { Textarea } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

textarea-example.tsx

import { Textarea } from "kipui";

<Textarea
  resize="auto"
  maxRows={8}
  maxLength={280}
  showCount
  placeholder="Say something"
/>

`showCount` needs `maxLength` — without it there is nothing to count against.
`resize="auto"` grows the field up to `maxRows`, then scrolls.

Playground

Change the props and the snippet underneath updates with them.

Preview

Props

variantdefault

sizemd

resizevertical

invalid

disabled

<Textarea variant="default" size="md" resize="vertical" />

API reference

Transcribed from the component's own types. Props with no default are required.

Prop	Default	Description
variant"default" \| "filled" \| "ghost"	"default"	Surface treatment of the field.
size"sm" \| "md" \| "lg"	"md"	Padding and type scale.
resize"none" \| "vertical" \| "auto"	"vertical"	`auto` grows with content up to `maxRows`.
maxRowsnumber	required	Ceiling for `resize="auto"`, in rows.
showCountboolean	false	Character counter. Requires `maxLength`.
invalidboolean	false	Error styling and `aria-invalid`.