ui / forms

Textarea

A calm, vertically resizable multiline field with supporting text.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

PROJECT NAMEENVIRONMENT

Include motion recipesAutomatic themeRespect the stored preference

INSTALL / SOURCE REGISTRY

Add Textarea to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/textarea.json

registry/default/ui/textarea.tsx

import * as React from "react"
import { clsx as cn } from "clsx"
import "@/components/designos/designos.css"

export const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement> & { label?: string; hint?: string }>(
  ({ label, hint, id, className, ...props }, ref) => {
    const generated = React.useId()
    const textareaId = id ?? generated
    return (
      <label className="dos-field" htmlFor={textareaId}>
        {label && <span className="dos-field__label">{label}</span>}
        <textarea ref={ref} id={textareaId} className={cn("dos-textarea", className)} aria-describedby={hint ? `${textareaId}-hint` : undefined} {...props} />
        {hint && <span id={`${textareaId}-hint`} className="dos-field__hint">{hint}</span>}
      </label>
    )
  },
)
Textarea.displayName = "Textarea"

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy