Zone de texte

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

export function TextareaDemo() {

Le textarea est un champ de saisie multiligne. C’est un élément <textarea> natif stylé — aucune bibliothèque d’enrobage, quel que soit le backend — qui grandit automatiquement avec son contenu via la propriété CSS field-sizing: content, habillé selon la recette néobrutaliste : bordures épaisses, ombres franches et typographie affirmée.

À privilégier dans ces cas :

• Commentaires et réponses — des réponses libres sur les billets, les avis et les tickets.
• Bios et descriptions — bios de profil, descriptions de produit, textes courts des formulaires de réglages.
• Formulaires de retour et de support — rapports de bug et messages de contact, tout ce qui dépasse une ligne.

Installation#

pnpmnpmyarnbun
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
Copier

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 }

Utilisation#

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

Copier<Textarea />

Exemples#

Field#

Utilisez Field, FieldLabel et FieldDescription pour créer une zone de texte dotée d’un libellé et d’une description.

import {
  Field,
  FieldDescription,

Désactivé#

Utilisez la prop disabled pour désactiver la zone de texte. Pour mettre en forme l’état désactivé, ajoutez l’attribut data-disabled au composant Field.

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

Invalide#

Utilisez la prop aria-invalid pour marquer la zone de texte comme invalide. Pour mettre en forme l’état invalide, ajoutez l’attribut data-invalid au composant Field.

import {
  Field,
  FieldDescription,

Button#

Associez-la à Button pour créer une zone de texte dotée d’un bouton d’envoi.

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

RTL#

Pour activer le RTL dans Neobrutalism, consultez le guide de configuration RTL.

"use client"

import * as React from "react"

Accessibilité#

En tant que contrôle de formulaire natif, le textarea bénéficie d’office de l’accès clavier — Tab lui donne le focus, Enter insère un saut de ligne au lieu d’envoyer le formulaire — donc aucun modèle ARIA ne s’applique. Associez-le toujours à une étiquette visible : FieldLabel se charge du câblage htmlFor, comme le montre l’exemple Field. Pour la validation, posez aria-invalid sur le textarea et référencez le message d’erreur avec aria-describedby afin que les lecteurs d’écran annoncent les deux.