Styla Formulär och Inmatningsfält

Vid utveckling av användargränssnitt i React är formulär och inmatningselement centrala för att samla in användardata. Tailwind CSS erbjuder ett kraftfullt utbud av verktyg som gör det möjligt att styla inmatningsfält, etiketter och valideringstillstånd för en polerad och tillgänglig upplevelse. Du kan använda grundläggande verktyg som border, rounded, px och py för att definiera form och utrymme för dina inmatningsfält. För färg och kontrast hjälper verktyg som bg-white, text-gray-700, border-gray-300 och placeholder-gray-400 till att bibehålla tydlighet och läsbarhet.

För att förbättra användarupplevelsen tillhandahåller Tailwind tillståndsbaserade verktyg för fokus-, fel- och inaktiverade tillstånd. Exempelvis markerar focus:outline-none och focus:ring-2 focus:ring-blue-500 ett inmatningsfält när det får fokus, vilket tydliggör för användaren var de skriver. För felmeddelanden används border-red-500 och text-red-600 för att visuellt indikera problem, medan disabled:bg-gray-100 och disabled:cursor-not-allowed tydliggör när ett fält inte kan interageras med. Etiketter kan stylas med block, mb-1 och font-medium för korrekt avstånd och betoning, vilket säkerställer att formulär är både attraktiva och tillgängliga.

Titta på detta exempel på en React-formulärkomponent stylad med Tailwind. Den innehåller ett textfält med etikett och visar olika stilar för normalläge, fokus, fel och inaktiverat tillstånd. Du kan se hur varje tillstånd hanteras med Tailwind-klasser.

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

Detta formulär använder Tailwind-verktyg för att hantera följande:

• Normalt tillstånd: border-gray-300, text-gray-700, bg-white;
• Fokuserat tillstånd: focus:ring-2, focus:ring-blue-500, focus:outline-none;
• Felltillstånd: border-red-500, text-red-600 och ett felmeddelande i text-red-600;
• Inaktiverat tillstånd: bg-gray-100, cursor-not-allowed.

Genom att kombinera dessa verktyg kan du skapa formulär som är visuellt tydliga, tillgängliga och responsiva för användarinteraktion.