Текстовая область

Многострочное поле ввода текста для комментариев, биографий и сообщений в службу поддержки — с оформлением в стиле необрутализма, включающим рамки и тени.

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

export function TextareaDemo() {

Textarea — многострочный ввод текста. Это стилизованный нативный <textarea> — без wrapper-библиотеки на обоих backend'ах — который auto-grows с контентом через CSS field-sizing: content, оформлен по рецепту необрутализма: толстые рамки, жёсткие тени и жирный шрифт.

Когда это пригодится:

Комментарии и ответы — свободные ответы к постам, отзывам и тикетам.
Био и описания — profile bios, описания товаров, blurbs в формах настроек.
Feedback и support-формы — баг-репорты и сообщения, всё длиннее одной строки.

Установка


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, чтобы отключить текстовую область. Чтобы стилизовать отключённое состояние, добавьте атрибут data-disabled к компоненту Field.

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

Недопустимо

Используйте свойство aria-invalid, чтобы пометить текстовую область как недопустимую. Чтобы стилизовать недопустимое состояние, добавьте атрибут data-invalid к компоненту Field.

import {
  Field,
  FieldDescription,

Button

Объедините с Button, чтобы создать текстовую область с кнопкой отправки.

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

RTL

Чтобы включить поддержку RTL в Neobrutalism, см. руководство по настройке RTL.

"use client"

import * as React from "react"

Доступность

Как нативный form-control, textarea получает доступ с клавиатуры бесплатно — Tab фокусирует, Enter вставляет перевод строки, а не отправляет форму, — поэтому ARIA-паттерн не нужен. Всегда связывайте с видимым label: FieldLabel берёт wiring htmlFor на себя, как в примере Field. Для валидации ставьте aria-invalid на textarea и ссылайтесь на сообщение об ошибке через aria-describedby, чтобы программы чтения с экрана объявляли оба.