Textarea
Collects free-form text that may span multiple lines.
- Status
- Beta
- Distribution
- Source via shadcn
Design
Functional preview
Loading functional preview…
Explore anatomy and visual states
Anatomy
- Container
- Native textarea
Variants and states
disablederrorfilledlgmdno-helperno-labelreadonlysm
Usage
When to use
- the response may be long, narrative, or contain multiple paragraphs.
When not to use
- the value is short, structured, or can be selected from options.
React composition
import { Textarea } from "@/components/ui/textarea"
<Textarea
id="message"
name="message"
aria-label="Mensagem"
placeholder="Descreva sua solicitação"
/>Implementation
Installation
Configure the namespace once in the React integration guide.
npx shadcn@latest add @tis/textareapnpm dlx shadcn@latest add @tis/textareayarn dlx shadcn@latest add @tis/textareabunx --bun shadcn@latest add @tis/textareaPublic contract
- Registry item
@tis/textarea- Distribution
- Source copied into the application
- Status
- Beta
Technical architecture
- Provider
- Native React
- Provider role
- Native or composition
- Behavioral architecture
- Base UI
- CSS
ds-tis/css
Accessibility
Semantics and behavior
Provide a label, preserve readonly/disabled, and associate helper, counter, and error using aria-describedby.
Consumer responsibility
- provide contextual accessible names and descriptions;
- preserve keyboard behavior, focus visibility, and semantic HTML;
- test real content, flow, and contrast in the application.
Validation evidence
Installed in the permanent React/Vite consumer and covered by production build, browser, responsive, and Axe checks.