Shadcn
Textarea 多行输入框
接收较长的多行文本内容。
Preview
import { Textarea } from "@scopify/ui/shadcn/components/textarea"
export default function TextareaDemo() {
return <Textarea placeholder="Type your message here." />
}
Scopify 说明
本页按 shadcn/ui 官方 Radix UI 组件文档的章节与示例完整整理。示例预览使用 Scopify 当前的 @scopify/ui/shadcn 实现；导入路径、主题 Token 和行为差异以本仓库源码为准。
Installation
npx shadcn@latest add textareaUsage
import { Textarea } from "@scopify/ui/shadcn/components/textarea"<Textarea />Field
Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.
Preview
import {
Field,
FieldDescription,
FieldLabel,
} from "@scopify/ui/shadcn/components/field"
import { Textarea } from "@scopify/ui/shadcn/components/textarea"
export function TextareaField() {
return (
<Field>
<FieldLabel htmlFor="textarea-message">Message</FieldLabel>
<FieldDescription>Enter your message below.</FieldDescription>
<Textarea id="textarea-message" placeholder="Type your message here." />
</Field>
)
}
Disabled
Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.
Preview
import { Field, FieldLabel } from "@scopify/ui/shadcn/components/field"
import { Textarea } from "@scopify/ui/shadcn/components/textarea"
export function TextareaDisabled() {
return (
<Field data-disabled>
<FieldLabel htmlFor="textarea-disabled">Message</FieldLabel>
<Textarea
id="textarea-disabled"
placeholder="Type your message here."
disabled
/>
</Field>
)
}
Invalid
Use the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.
Preview
import {
Field,
FieldDescription,
FieldLabel,
} from "@scopify/ui/shadcn/components/field"
import { Textarea } from "@scopify/ui/shadcn/components/textarea"
export function TextareaInvalid() {
return (
<Field data-invalid>
<FieldLabel htmlFor="textarea-invalid">Message</FieldLabel>
<Textarea
id="textarea-invalid"
placeholder="Type your message here."
aria-invalid
/>
<FieldDescription>Please enter a valid message.</FieldDescription>
</Field>
)
}
Button
Pair with Button to create a textarea with a submit button.
Preview
import { Button } from "@scopify/ui/shadcn/components/button"
import { Textarea } from "@scopify/ui/shadcn/components/textarea"
export function TextareaButton() {
return (
<div className="grid w-full gap-2">
<Textarea placeholder="Type your message here." />
<Button>Send message</Button>
</div>
)
}
RTL
To enable RTL support in shadcn/ui, see the RTL configuration guide.
Preview
"use client"
import * as React from "react"
import {
useTranslation,
type Translations,
} from "@/components/language-selector"
import {
Field,
FieldDescription,
FieldLabel,
} from "@/styles/radix-nova/ui-rtl/field"
import { Textarea } from "@/styles/radix-nova/ui-rtl/textarea"
const translations: Translations = {
en: {
dir: "ltr",
values: {
label: "Feedback",
placeholder: "Your feedback helps us improve...",
description: "Share your thoughts about our service.",
},
},
ar: {
dir: "rtl",
values: {
label: "التعليقات",
placeholder: "تعليقاتك تساعدنا على التحسين...",
description: "شاركنا أفكارك حول خدمتنا.",
},
},
he: {
dir: "rtl",
values: {
label: "משוב",
placeholder: "המשוב שלך עוזר לנו להשתפר...",
description: "שתף את מחשבותיך על השירות שלנו.",
},
},
}
export default function TextareaRtl() {
const { dir, t } = useTranslation(translations, "ar")
return (
<Field className="w-full max-w-xs" dir={dir}>
<FieldLabel htmlFor="feedback" dir={dir}>
{t.label}
</FieldLabel>
<Textarea id="feedback" placeholder={t.placeholder} dir={dir} rows={4} />
<FieldDescription dir={dir}>{t.description}</FieldDescription>
</Field>
)
}