Textarea

Multiline text entry that composes with the same labels and errors as Input.

CoreBasics@gaudi/design-system/core/TextareaView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Textarea from '@gaudi/design-system/core/Textarea';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/textarea-auto-resize.json.

Usage

import Textarea from '@gaudi/design-system/core/Textarea';
<Textarea aria-label='Message' value={message} onChange={event => setMessage(event.target.value)} rows={4} />

Playground

Props

rowsdefault 4

placeholder

invalid

Textarea.jsx

import Textarea from '@gaudi/design-system/core/Textarea';
<Textarea placeholder='Write a message' />

Examples

Growing note field with a counter

Storybook

Field states

Storybook

API

6 props

Accessibility

Use FieldLabel and FieldError. Preserve entered text after a validation or submission failure.

InputText, search, numeric and date inputs with prefix and suffix slots.11 examples FieldField composes form label, description, error, and input building blocks.7 examples AspectRatioKeep media at a stable aspect ratio as its container resizes.1 example AvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examples ButtonButton renders the Gaudi action and link-button variants.7 examples ButtonGroupGroup related actions with joined borders and consistent sizing.9 examples