多行文本

一个用于评论、个人简介和支持消息的多行文本输入框——采用了新粗野主义风格的边框和阴影处理。

import { Textarea } from "@/components/ui/textarea"

export function TextareaDemo() {

文本域就是一个多行文本输入框。它是加了样式的原生 <textarea> 元素——两种后端都没有额外的封装库——通过 CSS field-sizing: content 随内容自动增高，外观则套上新粗野主义的配方：粗边框、硬阴影、加粗字体。

适合以下场景：

评论与回复——帖子、评价和工单下的自由格式回复。
简介与描述——个人简介、商品描述、设置表单里的说明文字。
反馈与支持表单——缺陷报告和联系消息，任何超过一行的内容。

安装


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
npx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/textarea.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/textarea.json

将以下代码复制并粘贴到您的项目中。

components/ui/textarea.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        "flex field-sizing-content min-h-16 w-full rounded border-2 bg-input px-3 py-2 text-sm shadow-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Textarea }

更新导入路径以匹配您的项目设置。

用法

import { Textarea } from "@/components/ui/textarea"

<Textarea />

示例

Field

使用 Field、FieldLabel 和 FieldDescription 创建一个带标签和描述的文本域。

import {
  Field,
  FieldDescription,

禁用

使用 disabled 属性来禁用文本域。要为禁用状态设置样式，请在 Field 组件上添加 data-disabled 属性。

import { Field, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"

无效

使用 aria-invalid 属性将文本域标记为无效。要为无效状态设置样式，请在 Field 组件上添加 data-invalid 属性。

import {
  Field,
  FieldDescription,

Button

与 Button 搭配使用，创建一个带提交按钮的文本域。

import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

RTL

要在 Neobrutalism 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

作为原生表单控件，文本域天生就支持键盘操作——Tab 可以聚焦它，Enter 插入换行而不是提交表单——因此不涉及任何 ARIA 模式。请始终为它配一个可见的标签：FieldLabel 会处理好 htmlFor 的关联，就像 Field 示例里那样。校验方面，请在文本域上设置 aria-invalid，并用 aria-describedby 指向错误提示，屏幕阅读器才会把两者一起播报。