Textarea
Grows with its content on a spring, with a ring that fills toward the character limit and warms near the end.
- Category: Inputs
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Textarea
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | |
maxLength | number | — | |
minRows / maxRows | number | 3 / 10 | |
...props | ComponentProps<"textarea"> | — |
About Textarea
Textarea grows with its content on a spring instead of showing a scrollbar, and an optional ring fills toward the character limit, warming as you get close. It keeps long-form fields calm and readable.
Textarea is an input component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Textarea
- Comments, replies and messages.
- Bio and description fields in profiles.
- Feedback and support forms.
- Any text field with a character limit.
How it works
Height is measured from the content and animated between minRows and maxRows. The ring is an SVG circle whose stroke follows length over maxLength, and the remaining count is announced to screen readers near the limit.
It is a real form control: it has an accessible name, works with the keyboard alone, shows a visible focus ring and announces its state to screen readers. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Textarea
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change label, placeholder, maxLength, minRows live, and the Code tab updates to match, so the snippet you copy already carries your values.
- label (string).
- maxLength (number).
- minRows / maxRows (number, default 3 / 10).
Goes well with Textarea
Textarea is already composed into a ready-made section, so you can see it in context or install the whole block.
- Contact Form: Contact section
- Range Slider: Six animated React range sliders on one accessible core: inline, tick, fluid, wave, bubble and ruler
- Button: An animated React button with six variants, spring press feedback and a width-stable loading state
- Switch: An animated React toggle switch whose thumb stretches when pressed, like a real switch
- Checkbox: An animated React checkbox: the check draws itself in, the box pops, indeterminate morphs to a dash
- Radio Group: An animated React radio group with roving focus and a highlight that glides between card options
Install Textarea
npx shadcn@latest add https://charcoalui.com/r/textarea.jsonTextarea is free and MIT licensed. The command copies textarea.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Border Beam, a Pro piece: A beam of coloured light that rides the border of any card, input or button, with a soft glow outside and an optional wash inside. Nine palettes, rotate or pulse.
Frequently asked questions
- How do I install Textarea?
- Run npx shadcn@latest add https://charcoalui.com/r/textarea.json. The shadcn CLI copies textarea.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Textarea free for commercial use?
- Yes. Textarea is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Textarea work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Textarea?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Textarea's props and source and get_install_command returns the exact command.