Formulare und Eingabefelder Gestalten

Beim Erstellen von Benutzeroberflächen in React stehen Formulare und Eingabeelemente im Mittelpunkt der Datenerfassung. Tailwind CSS bietet eine leistungsstarke Sammlung von Utilities, mit denen Sie Eingabefelder, Beschriftungen und Validierungszustände für ein professionelles und barrierefreies Erlebnis gestalten können. Mit Basis-Utilities wie border, rounded, px und py definieren Sie Form und Abstand Ihrer Eingaben. Für Farbe und Kontrast sorgen Utilities wie bg-white, text-gray-700, border-gray-300 und placeholder-gray-400, die Klarheit und Lesbarkeit gewährleisten.

Zur Verbesserung der Benutzererfahrung stellt Tailwind zustandsbasierte Utilities für Fokus-, Fehler- und Deaktiviert-Zustände bereit. Beispielsweise heben focus:outline-none und focus:ring-2 focus:ring-blue-500 ein Eingabefeld hervor, sobald es den Fokus erhält, sodass Benutzer sofort erkennen, wo sie tippen. Für Fehlerzustände signalisieren border-red-500 und text-red-600 visuell Probleme, während disabled:bg-gray-100 und disabled:cursor-not-allowed deutlich machen, wenn ein Eingabefeld nicht bearbeitet werden kann. Beschriftungen lassen sich mit block, mb-1 und font-medium für korrekten Abstand und Betonung gestalten, sodass Formulare sowohl ansprechend als auch barrierefrei sind.

Betrachten Sie dieses Beispiel eines React-Formular-Komponenten, die mit Tailwind gestaltet wurde. Sie enthält ein Texteingabefeld mit Beschriftung und zeigt verschiedene Stile für Normal-, Fokus-, Fehler- und Deaktiviert-Zustände. Sie sehen, wie jeder Zustand mit Tailwind-Klassen umgesetzt wird.

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>
  );
}

Dieses Formular verwendet Tailwind-Utilities für folgende Zustände:

• Normalzustand: border-gray-300, text-gray-700, bg-white;
• Fokuszustand: focus:ring-2, focus:ring-blue-500, focus:outline-none;
• Fehlerzustand: border-red-500, text-red-600 und eine Fehlermeldung in text-red-600;
• Deaktiviert-Zustand: bg-gray-100, cursor-not-allowed.

Durch die Kombination dieser Utilities können Sie Formulare erstellen, die visuell klar, barrierefrei und reaktionsfähig auf Benutzereingaben sind.