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

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

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

export function TextareaDemo() {

Textarea — багаторядкове текстове поле. Це стилізований нативний <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, щоб вимкнути текстову область. Щоб стилізувати вимкнений стан, додайте атрибут 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"

Доступність

Як нативний контроль форми, textarea отримує доступ із клавіатури «безкоштовно» — Tab фокусує, Enter вставляє новий рядок, а не відправляє форму — тож окремий ARIA-патерн не застосовується. Завжди поєднуйте з видимою міткою: FieldLabel обробляє зв’язок htmlFor, як у прикладі Field. Для валідації ставте aria-invalid на textarea й посилайтеся на повідомлення про помилку через aria-describedby, щоб програми зчитування з екрана оголошували обидва.