Components•Textarea
Components•Textarea
Textarea
A multi-line text field for notes, descriptions, and longer user input.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/primitive-textareaHow to use
import { BjorkTextarea } from "@/components/bjork-ui/primitives";Props
classNamestringPass through styling hooks for the Textarea primitive without replacing the base Bjork surface.
childrenReactNodeComposable content, labels, icons, and nested content where the primitive supports them.
variant"default" | "quiet" | "inset" | "ghost"Match the textarea surface to the same Bjork field variants used by inputs.
Base textarea
Use for longer text entry with the standard raised Bjork field surface.
<BjorkTextarea variant="base" placeholder="Write a component note..."/>Outline textarea
Use when the field needs a clearer edge and the inset field shadow.
<BjorkTextarea variant="outline" defaultValue="The component is ready for review." className="min-h-[140px]"/>Quiet textarea
Use for lower-emphasis notes inside denser settings surfaces.
<BjorkTextarea variant="quiet" defaultValue="Lower emphasis, same Bjork field language."/>