Stile di Moduli e Campi di Input

Quando si sviluppano interfacce utente in React, i moduli e gli elementi di input sono fondamentali per la raccolta dei dati degli utenti. Tailwind CSS offre un potente set di utility che consente di stilizzare i campi di input, le etichette e gli stati di validazione per un'esperienza raffinata e accessibile. È possibile utilizzare utility di base come border, rounded, px e py per definire la forma e lo spazio degli input. Per colore e contrasto, utility come bg-white, text-gray-700, border-gray-300 e placeholder-gray-400 aiutano a mantenere chiarezza e leggibilità.

Per migliorare l'esperienza utente, Tailwind fornisce utility basate sullo stato per focus, errore e disabilitazione. Ad esempio, focus:outline-none e focus:ring-2 focus:ring-blue-500 evidenziano un input quando riceve il focus, rendendo chiaro all'utente dove sta digitando. Per gli stati di errore, border-red-500 e text-red-600 indicano visivamente i problemi, mentre disabled:bg-gray-100 e disabled:cursor-not-allowed rendono evidente quando un input non può essere utilizzato. Le etichette possono essere stilizzate con block, mb-1 e font-medium per una corretta spaziatura ed enfasi, garantendo che i moduli siano sia attraenti che accessibili.

Considera questo esempio di componente form React stilizzato con Tailwind. Include un campo di testo con etichetta e mostra stili diversi per gli stati normale, focus, errore e disabilitato. Puoi vedere come ogni stato viene gestito utilizzando le classi Tailwind.

import React, { useState } from "react";

function ExampleForm() {
  const [value, setValue] = useState("");
  const [touched, setTouched] = useState(false);
  const [disabled, setDisabled] = useState(false);
  const hasError = touched && value.trim() === "";

  return (
    <form className='max-w-sm mx-auto mt-8'>
      <label
        htmlFor='username'
        className='block mb-1 font-medium text-gray-700'
      >
        Username
      </label>
      <input
        id='username'
        type='text'
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onBlur={() => setTouched(true)}
        disabled={disabled}
        className={`w-full px-3 py-2 border rounded-md shadow-sm placeholder-gray-400
          focus:outline-none focus:ring-2 focus:ring-blue-500
          ${
            hasError
              ? "border-red-500 text-red-600"
              : "border-gray-300 text-gray-700"
          }
          ${disabled ? "bg-gray-100 cursor-not-allowed" : "bg-white"}
        `}
        placeholder='Enter your username'
      />
      {hasError && (
        <p className='mt-1 text-sm text-red-600'>Username is required.</p>
      )}
      <button
        type='button'
        className='mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700'
        onClick={() => setDisabled(!disabled)}
      >
        {disabled ? "Enable Input" : "Disable Input"}
      </button>
    </form>
  );
}

Questo modulo utilizza le utility di Tailwind per gestire quanto segue:

• Stato normale: border-gray-300, text-gray-700, bg-white;
• Stato focus: focus:ring-2, focus:ring-blue-500, focus:outline-none;
• Stato errore: border-red-500, text-red-600 e un messaggio di errore in text-red-600;
• Stato disabilitato: bg-gray-100, cursor-not-allowed.

Combinando queste utility, è possibile creare moduli visivamente chiari, accessibili e reattivi all'interazione dell'utente.