Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- DrawerNew
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- OTP FieldNew
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Textarea
A native textarea element.
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
return <Textarea placeholder="Type your message here" />;
}
Installation
pnpm dlx shadcn@latest add @coss/textarea
Usage
import { Textarea } from "@/components/ui/textarea"<Textarea />Field Integration
Unlike Base UI's built-in form controls, Base UI does not provide a native Textarea primitive. This component wraps the native <textarea> element in Field.Control internally, so it integrates with Field out of the box — no need to wrap it in a FieldControl manually.
<Field>
<FieldLabel>Bio</FieldLabel>
<Textarea placeholder="Tell us about yourself…" />
<FieldDescription>Write a short bio.</FieldDescription>
<FieldError>This field is required.</FieldError>
</Field>API Reference
Textarea
Styled native textarea element with custom size options.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | number | "default" | Controls the textarea padding. Number values are passed to the native rows attribute |
unstyled | boolean | false | When true, removes all default styling |
Examples
Small Size
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
return <Textarea placeholder="Type your message here" size="sm" />;
}
Large Size
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
return <Textarea placeholder="Type your message here" size="lg" />;
}
Disabled
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
return <Textarea disabled placeholder="Can't type here" />;
}
With Label
import { useId } from "react";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
const id = useId();
return (
<div className="flex flex-col items-start gap-2">
<Label htmlFor={id}>Message</Label>
<Textarea id={id} placeholder="Type your message here" />
</div>
);
}
Form Integration
"use client";
import type { FormEvent } from "react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
const [loading, setLoading] = useState(false);
const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
setLoading(true);
await new Promise((r) => setTimeout(r, 800));
setLoading(false);
alert(`Message: ${formData.get("message") || ""}`);
};
return (
<Form className="max-w-64" onSubmit={onSubmit}>
<Field>
<FieldLabel>Message</FieldLabel>
<Textarea
name="message"
placeholder="Type your message here"
required
/>
<FieldError>This field is required.</FieldError>
</Field>
<Button loading={loading} type="submit">
Submit
</Button>
</Form>
);
}