Obszar tekstu

Wielowierszowe pole tekstowe do wpisywania komentarzy, biografii i wiadomości do pomocy technicznej — z neobrutalistycznymi ramkami i cieniami.

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

export function TextareaDemo() {

Textarea to wielowierszowe pole tekstowe. To ostylowany natywny element <textarea> — bez żadnej biblioteki opakowującej na żadnym z backendów — który rośnie razem z treścią dzięki CSS field-sizing: content, ubrany w neobrutalistyczną recepturę: grube ramki, twarde cienie i wyrazistą typografię.

Sięgnij po to rozwiązanie, gdy:

Komentarze i odpowiedzi — swobodne wypowiedzi pod postami, recenzjami i zgłoszeniami.
Bio i opisy — bio w profilu, opisy produktów, krótkie notki w formularzach ustawień.
Formularze opinii i wsparcia — zgłoszenia błędów i wiadomości kontaktowe, wszystko, co dłuższe niż jedna linia.

Instalacja


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

Skopiuj i wklej poniższy kod do swojego projektu.

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 }

Zaktualizuj ścieżki importu, aby pasowały do konfiguracji Twojego projektu.

Użycie

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

<Textarea />

Przykłady

Field

Użyj Field, FieldLabel i FieldDescription, aby utworzyć textarea z etykietą i opisem.

import {
  Field,
  FieldDescription,

Wyłączony

Użyj właściwości disabled, aby wyłączyć textarea. Aby ostylować stan wyłączony, dodaj atrybut data-disabled do komponentu Field.

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

Nieprawidłowy

Użyj właściwości aria-invalid, aby oznaczyć textarea jako nieprawidłowy. Aby ostylować stan nieprawidłowy, dodaj atrybut data-invalid do komponentu Field.

import {
  Field,
  FieldDescription,

Button

Połącz z Button, aby utworzyć textarea z przyciskiem wysyłania.

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

RTL

Aby włączyć obsługę RTL w Neobrutalism, zobacz przewodnik konfiguracji RTL.

"use client"

import * as React from "react"

Dostępność

Jako natywna kontrolka formularza textarea dostaje obsługę klawiatury za darmo — Tab ustawia na niej fokus, Enter wstawia nowy wiersz zamiast wysyłać formularz — więc żaden wzorzec ARIA tu nie obowiązuje. Zawsze łącz ją z widoczną etykietą: FieldLabel załatwia podpięcie htmlFor, jak w przykładzie z komponentem Field. Przy walidacji ustaw aria-invalid na textarea i wskaż komunikat błędu przez aria-describedby, aby czytniki ekranu ogłosiły jedno i drugie.