Textarea

Instalacja#

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/textarea.json

Użycie#

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

<Field>
  <FieldLabel htmlFor="message">Message</FieldLabel>
  <Textarea id="message" placeholder="Tell us what happened…" />
</Field>

Textarea ma to samo obramowanie, wypełnienie, poświatę fokusu i styl błędu co Input, więc oba komponenty pasują do siebie w każdym formularzu — bez żadnych wyjątków w kodzie.

Przykłady#

Rośnie razem z treścią#

Textarea korzysta z field-sizing: content: zaczyna od wygodnych trzech wierszy i rośnie w trakcie pisania, więc nikt nie musi pisać przez dziurkę od klucza. Ogranicz wzrost klasą max-h-* — powyżej tej wysokości pole zaczyna się przewijać. W przeglądarkach bez obsługi field-sizing pole zachowuje minimalną wysokość, a jego rozmiar można zmienić przeciąganiem.

Limit znaków#

Pokaż limit, zanim ktoś do niego dojdzie, odliczaj znaki w trakcie pisania i przełącz się na błąd po jego przekroczeniu — zamiast po cichu ucinać tekst. Licznik jest powiązany przez aria-describedby; osobny region na żywo o niskim priorytecie (polite) odzywa się dopiero blisko limitu, żeby nie przerywać osobom korzystającym z czytnika ekranu przy każdym naciśnięciu klawisza.

Wyłączone i tylko do odczytu#

Wyłączone pole nie przyjmuje fokusu i nie trafia do danych formularza. Pole tylko do odczytu nadal przyjmuje fokus, a jego treść można zaznaczać i przewijać — używaj go do tekstu, który trzeba przeczytać lub skopiować, na przykład wpisu z dziennika audytu.

W formularzu komentarza#

Pole tekstowe często ma własny, niewielki zestaw akcji. Akcję główną umieść na końcu, a pole zrób na tyle szerokie, żeby zmieściło prawdziwe zdanie.

Wytyczne#

Kiedy używać#

• Odpowiedzi otwarte, dłuższe niż jeden wiersz: opinie, opisy, notki biograficzne, wiadomości.
• Treści, w których liczą się podziały wierszy, na przykład informacje o wydaniu albo adresy.

Kiedy nie używać#

• Krótkie odpowiedzi — Input lepiej sygnalizuje „odpowiedz krótko”.
• Rozbudowane formatowanie, takie jak pogrubienia, listy czy wzmianki — użyj edytora tekstu sformatowanego.
• Pole wiadomości w czacie z załącznikami i przyciskami wysyłania — złóż je z Input Group i InputGroupTextarea.

Rozmiar na miarę oczekiwanej odpowiedzi#

Początkowa wysokość buduje oczekiwania. Pole na jeden wiersz sugeruje krótką odpowiedź; trzy do pięciu wierszy zachęcają do przemyślanej. Nie wyłączaj zmiany rozmiaru, chyba że układ naprawdę na to nie pozwala — polegają na niej osoby, które ustawiły większy tekst.

Dostępność#

Textarea to natywny <textarea>: czytniki ekranu przedstawiają go jako wielowierszowe pole edycji, a wszystkie funkcje przeglądarki działają bez dodatkowej pracy — w tym sprawdzanie pisowni, dyktowanie i wprowadzanie tekstu przez IME.

• Nadaj etykietę. Powiąż widoczny FieldLabel przez htmlFor/id albo dodaj aria-label.
• Opisz limity. Limity i wskazówki dotyczące formatu umieść w FieldDescription powiązanym przez aria-describedby, a nie w placeholderze.
• Informuj oszczędnie. Licznik w regionie na żywo, który odzywa się przy każdym naciśnięciu klawisza, zagłusza to, co ktoś wpisuje. Komunikat powinien pojawić się dopiero wtedy, gdy tekst zbliża się do limitu lub go przekracza.
• Kontrast i rozmiar. Obramowanie ma kontrast co najmniej 3:1 względem strony, a tekst na małych ekranach ma 16 px, żeby iOS nie powiększał widoku.

Dokumentacja API#

Textarea#

Renderuje natywny element <textarea> i przyjmuje wszystkie jego atrybuty.