Formatering af Formularer og Inputfelter

Ved opbygning af brugergrænseflader i React er formularer og inputelementer centrale for indsamling af brugerdata. Tailwind CSS tilbyder et kraftfuldt sæt af værktøjer, der gør det muligt at style inputfelter, labels og valideringstilstande for en poleret og tilgængelig oplevelse. Du kan anvende basisværktøjer som border, rounded, px og py til at definere form og afstand på dine inputfelter. For farve og kontrast hjælper værktøjer som bg-white, text-gray-700, border-gray-300 og placeholder-gray-400 med at opretholde klarhed og læsbarhed.

For at forbedre brugeroplevelsen tilbyder Tailwind tilstandsbaserede værktøjer til fokus, fejl og deaktiverede tilstande. For eksempel fremhæver focus:outline-none og focus:ring-2 focus:ring-blue-500 et inputfelt, når det får fokus, hvilket tydeliggør for brugeren, hvor de skriver. Til fejlsituationer angiver border-red-500 og text-red-600 visuelt problemer, mens disabled:bg-gray-100 og disabled:cursor-not-allowed tydeliggør, når et inputfelt ikke kan interageres med. Labels kan styles med block, mb-1 og font-medium for korrekt afstand og fremhævning, hvilket sikrer, at formularer både er attraktive og tilgængelige.

Overvej dette eksempel på en React-formularkomponent stylet med Tailwind. Den indeholder et tekstinput med label og viser forskellige stilarter for normal, fokus, fejl og deaktiverede tilstande. Du kan se, hvordan hver tilstand håndteres ved hjælp af 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>
  );
}

Denne formular anvender Tailwind-værktøjer til at håndtere følgende:

• Normal tilstand: border-gray-300, text-gray-700, bg-white;
• Fokus-tilstand: focus:ring-2, focus:ring-blue-500, focus:outline-none;
• Fejltilstand: border-red-500, text-red-600 og en fejlmeddelelse i text-red-600;
• Deaktiveret tilstand: bg-gray-100, cursor-not-allowed.

Ved at kombinere disse værktøjer kan du oprette formularer, der er visuelt tydelige, tilgængelige og reagerer på brugerinteraktion.