Overview
Forms & inputs
Design Systemv1.3.0Search documentation
Search for a command to run or a page to navigate to.
Design Systemv1.3.0Search for a command to run or a page to navigate to.
Textarea is a multi-line text input component for collecting longer text entries.
"use client"
import { Textarea } from "@strongtie/design-system/textarea"
export function TextareaDefault() {
return <Textarea placeholder="Type your message here..." />
}
import { Textarea } from "@strongtie/design-system/textarea"Not installed yet? Add the package to your app:
npm install @strongtie/design-system
All components accept standard HTML attributes and React props.
"use client"
import { Label } from "@strongtie/design-system/label"
import { Textarea } from "@strongtie/design-system/textarea"
export function TextareaDisabled() {
return (
<div className="flex flex-col gap-2">
<Label htmlFor="disabled-textarea">Disabled Textarea</Label>
<Textarea
id="disabled-textarea"
placeholder="You cannot edit this"
disabled
defaultValue="This textarea is disabled and cannot be edited."
/>
</div>
)
}
"use client"
import * as React from "react"
import { Button } from "@strongtie/design-system/button"
import { Label } from "@strongtie/design-system/label"
import { Textarea } from "@strongtie/design-system/textarea"
export function TextareaWithForm() {
const [submitted, setSubmitted] = React.useState<string | null>(null)
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
const formData = new FormData(e.currentTarget)
const message = formData.get("message") as string
setSubmitted(message)
}
return (
<div className="space-y-4">
<form onSubmit={handleSubmit} className="space-y-4">
<div className="flex flex-col gap-2 space-y-2">
<Label htmlFor="message">Your Message</Label>
<Textarea
id="message"
name="message"
placeholder="Type your message here..."
required
className="min-h-[100px]"
/>
</div>
<Button type="submit">Submit</Button>
</form>
{submitted && (
<div className="rounded-md border p-4">
<p className="text-sm font-medium">Submitted message:</p>
<p className="text-muted-foreground mt-2 text-sm">{submitted}</p>
</div>
)}
</div>
)
}
"use client"
import { Label } from "@strongtie/design-system/label"
import { Textarea } from "@strongtie/design-system/textarea"
export function TextareaWithLabel() {
return (
<div className="grid w-full gap-1.5">
<Label htmlFor="message">Your message</Label>
<Textarea id="message" placeholder="Type your message here..." />
</div>
)
}