Textarea

Multi-line text input for longer form content

Primitive

A textarea collects multi-line text that grows with its content. Use it for comments, messages, or descriptions; for a single line such as a name or email, use Input instead.

Preview

import { Textarea } from "@/components/ui/cubby-ui/textarea"
 
export default function TextareaBasic() {
  return <Textarea placeholder="Type your message here." />
}

Installation

npxnpx shadcn@latest add @cubby-ui/textarea

Usage


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


<Textarea />

Examples

With Label

Pair the textarea with a Label for an accessible, clickable field name.

Your message

import { Label } from "@/components/ui/cubby-ui/label"
import { Textarea } from "@/components/ui/cubby-ui/textarea"
 
export default function TextareaWithLabel() {
  return (
    <div className="grid w-full gap-1.5">

With Helper Text

Add helper text below the field for guidance or validation messages.

Description

Write a brief description of your project. Markdown is supported.

import { Label } from "@/components/ui/cubby-ui/label"
import { Textarea } from "@/components/ui/cubby-ui/textarea"
 
export default function TextareaWithHelperText() {
  return (
    <div className="grid w-full gap-1.5">

Controlled

Use value and onChange to drive the textarea's value yourself.

Bio

0/500 characters

"use client"
 
import { useState } from "react"
import { Label } from "@/components/ui/cubby-ui/label"
import { Textarea } from "@/components/ui/cubby-ui/textarea"

Disabled State

Set disabled to block input and dim the field.

Comments (Disabled)

import { Label } from "@/components/ui/cubby-ui/label"
import { Textarea } from "@/components/ui/cubby-ui/textarea"
 
export default function TextareaDisabledState() {
  return (
    <div className="grid w-full gap-1.5">

Use variant="outline" to match the outline Button: a card fill with a hairline border in light mode, a recessed fill with a faint ring in dark mode. The default tint already reads on the page, Cards, Dialogs, and popovers, so no field needs a per-surface variant.

Message

import { Label } from "@/components/ui/cubby-ui/label";
import { Textarea } from "@/components/ui/cubby-ui/textarea";
 
export default function TextareaOutline() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">

Variant	Description
`default`	A translucent tint that reads on any surface.
`outline`	The outline Button's fill and hairline edge.

API Reference

Props

Upgrading

If you're reinstalling over an earlier version, check these changes:

Before	Now
`variant="elevated"` for fields on Cards and Dialogs	Removed. The default tint works on any surface, so drop the prop.
One filled style	`variant="outline"` adds a bordered style, matching the outline Button.