Champ de saisie

import {
  Field,
  FieldDescription,

Le champ de saisie capture une seule ligne de texte — noms, adresses e-mail, requêtes de recherche. Construit sur le composant Base UI Input, une fine surcouche de l’<input> natif, et habillé selon la recette néobrutaliste : bordure épaisse, ombre franche et un contour de focus à fort contraste.

À privilégier pour :

• Formulaires de connexion et d’inscription — champs e-mail, nom d’utilisateur et mot de passe associés à Field et FieldLabel.
• Barres de recherche — en ligne avec un Button, ou avec des icônes via InputGroup.
• Pages de paiement et de réglages — adresses, numéros de carte et champs de profil disposés dans un FieldGroup.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/input.json
npx shadcn@latest add https://neobrutalism.com/r/base/input.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/input.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/input.json
Copier

import * as React from "react"

import { cn } from "@/lib/utils"

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "h-8 w-full min-w-0 rounded border-2 bg-input px-3 py-2 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Input }

Utilisation#

Copierimport { Input } from "@/components/ui/input"

Copier<Input />

Exemples#

Simple#

import { Input } from "@/components/ui/input"

export function InputBasic() {

Field#

Utilisez Field, FieldLabel et FieldDescription pour créer un champ avec un libellé et une description.

import {
  Field,
  FieldDescription,

Field Group#

Utilisez FieldGroup pour afficher plusieurs blocs Field et construire des formulaires.

import { Button } from "@/components/ui/button"
import {
  Field,

Désactivé#

Utilisez la prop disabled pour désactiver le champ. Pour styliser l’état désactivé, ajoutez l’attribut data-disabled au composant Field.

import {
  Field,
  FieldDescription,

Invalide#

Utilisez la prop aria-invalid pour marquer le champ comme invalide. Pour styliser l’état invalide, ajoutez l’attribut data-invalid au composant Field.

import {
  Field,
  FieldDescription,

Fichier#

Utilisez la prop type="file" pour créer un champ de sélection de fichier.

import {
  Field,
  FieldDescription,

En ligne#

Utilisez Field avec orientation="horizontal" pour créer un champ en ligne. Associez-le à Button pour créer un champ de recherche doté d’un bouton.

import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Grille#

Utilisez une disposition en grille pour placer plusieurs champs côte à côte.

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Requis#

Utilisez l’attribut required pour indiquer les champs obligatoires.

import {
  Field,
  FieldDescription,

Badge#

Utilisez Badge dans le libellé pour mettre en avant un champ recommandé.

import { Badge } from "@/components/ui/badge"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Input Group#

Pour ajouter des icônes, du texte ou des boutons à l’intérieur d’un champ, utilisez le composant InputGroup. Consultez le composant Input Group pour d’autres exemples.

import { InfoIcon } from "lucide-react"

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

Button Group#

Pour ajouter des boutons à un champ, utilisez le composant ButtonGroup. Consultez le composant Button Group pour d’autres exemples.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldLabel } from "@/components/ui/field"

Formulaire#

Un exemple de formulaire complet avec plusieurs champs, un select et un bouton.

import { Button } from "@/components/ui/button"
import {
  Field,

RTL#

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

"use client"

import * as React from "react"

Accessibilité#

Input rend un <input> natif : l’édition au clavier, le focus et l’envoi du formulaire ne demandent aucun câblage ARIA. Le reste vous incombe :

• Étiquetez chaque champ. Associez-le à un FieldLabel (ou à un <label htmlFor>) — un placeholder n’est pas une étiquette ; il disparaît à la saisie et n’est pas annoncé de manière fiable.
• Reliez le texte d’erreur. Définissez aria-invalid sur le champ et faites pointer aria-describedby vers l’id de votre FieldError ou FieldDescription, pour que les lecteurs d’écran lisent le message avec le champ.
• Choisissez les bons type et autocomplete. type="email" plus autocomplete="email" donne le bon clavier mobile et le bon remplissage automatique.