Textarea
A styled multiline text input.
- Chromium
- Firefox
- WebKit
- WCAG 2.2 AA
Preview
import { Textarea } from "@moe-ui/registry/components/ui/textarea";
export default function TextareaPreview() {
return <Textarea placeholder="Type your message here." />;
}
One command, your source
Installation
pnpm dlx @moe-ui/cli@beta add textareaUsage
The CLI installs editable source into your application. Import the component from your configured UI directory:
import { Textarea } from "@/components/ui/textarea";Variants and composition
Compound parts and variants remain regular source in your project, so you can change them without wrapping a package API.
Public API
The canonical source panel below lists every public export, dependency, and the complete implementation shipped by the registry.
Keyboard and accessibility
Associate the control with a visible label. Keyboard focus, disabled state, and validation semantics are covered by the web test matrix.
Browser support
This beta is release-tested in Chromium, Firefox, and WebKit in light and dark themes. See the web compatibility matrix for the current gate.
Nothing hiddenCanonical source and public exports1 exports
Textarea"use client";
import { cn } from "../../lib/utils";
import { Platform, TextInput, type TextInputProps } from "react-native";
function Textarea({
className,
multiline = true,
numberOfLines = Platform.select({ web: 2, native: 8 }), // On web, numberOfLines also determines initial height. On native, it determines the maximum height.
placeholderClassName,
...props
}: TextInputProps & React.RefAttributes<TextInput>) {
return (
<TextInput
className={cn(
"text-foreground border-input dark:bg-input/30 flex min-h-16 w-full flex-row rounded-md border bg-transparent px-3 py-2 text-base shadow-sm shadow-black/5 md:text-sm",
Platform.select({
web: "placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive field-sizing-content resize-y outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed",
}),
props.editable === false && "opacity-50",
className,
)}
placeholderClassName={cn("text-muted-foreground", placeholderClassName)}
multiline={multiline}
numberOfLines={numberOfLines}
textAlignVertical="top"
{...props}
/>
);
}
export { Textarea };