Input

import {
  Field,
  FieldDescription,

L’input raccoglie una singola riga di testo — nomi, email, query di ricerca. Costruito sul componente Base UI Input, un sottile wrapper sull’<input> nativo, e vestito secondo la ricetta neobrutalista: bordo spesso, ombra netta e un contorno di focus ad alto contrasto.

Quando usarlo:

• Form di accesso e registrazione — campi email, nome utente e password abbinati a Field e FieldLabel.
• Barre di ricerca — in linea con un Button, oppure con icone tramite InputGroup.
• Pagine di checkout e impostazioni — indirizzi, numeri di carta e campi del profilo disposti in un FieldGroup.

Installazione#

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
Copia

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 }

Utilizzo#

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

Copia<Input />

Esempi#

Base#

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

export function InputBasic() {

Field#

Usa Field, FieldLabel e FieldDescription per creare un input con un’etichetta e una descrizione.

import {
  Field,
  FieldDescription,

Field Group#

Usa FieldGroup per mostrare più blocchi Field e creare moduli.

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

Disabilitato#

Usa la prop disabled per disabilitare l’input. Per applicare uno stile allo stato disabilitato, aggiungi l’attributo data-disabled al componente Field.

import {
  Field,
  FieldDescription,

Non valido#

Usa la prop aria-invalid per contrassegnare l’input come non valido. Per applicare uno stile allo stato non valido, aggiungi l’attributo data-invalid al componente Field.

import {
  Field,
  FieldDescription,

File#

Usa la prop type="file" per creare un input di tipo file.

import {
  Field,
  FieldDescription,

In linea#

Usa Field con orientation="horizontal" per creare un input in linea. Abbinalo a Button per creare un input di ricerca con un pulsante.

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

Griglia#

Usa un layout a griglia per disporre più input affiancati.

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

Obbligatorio#

Usa l’attributo required per indicare gli input obbligatori.

import {
  Field,
  FieldDescription,

Badge#

Usa Badge nell’etichetta per evidenziare un campo consigliato.

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

Input Group#

Per aggiungere icone, testo o pulsanti all’interno di un input, usa il componente InputGroup. Consulta il componente Input Group per altri esempi.

import { InfoIcon } from "lucide-react"

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

Button Group#

Per aggiungere pulsanti a un input, usa il componente ButtonGroup. Consulta il componente Button Group per altri esempi.

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

Modulo#

Un esempio di modulo completo con più input, un select e un pulsante.

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

RTL#

Per abilitare il supporto RTL in Neobrutalism, consulta la guida alla configurazione RTL.

"use client"

import * as React from "react"

Accessibilità#

Input rende un <input> nativo, quindi modifica da tastiera, focus e invio del form non richiedono alcun collegamento ARIA. Il resto spetta a te:

• Etichetta ogni input. Abbinalo a una FieldLabel (o a un <label htmlFor>) — un placeholder non è un’etichetta: sparisce appena digiti e non viene annunciato in modo affidabile.
• Associa il testo di errore. Imposta aria-invalid sull’input e fai puntare aria-describedby all’id del tuo FieldError o FieldDescription, così gli screen reader leggono il messaggio insieme al campo.
• Scegli il type e l’autocomplete giusti. type="email" più autocomplete="email" porta la tastiera mobile corretta e il riempimento automatico.