Stiler for Skjemaer og Inndatafelt

Når du bygger brukergrensesnitt i React, er skjemaer og inndataelementer sentrale for å samle inn brukerdata. Tailwind CSS tilbyr et kraftig sett med verktøy som lar deg style inndatafelt, etiketter og valideringstilstander for en polert og tilgjengelig opplevelse. Du kan bruke basisverktøy som border, rounded, px og py for å definere form og plassering av inndatafeltene dine. For farge og kontrast hjelper verktøy som bg-white, text-gray-700, border-gray-300 og placeholder-gray-400 med å opprettholde klarhet og lesbarhet.

For å forbedre brukeropplevelsen tilbyr Tailwind tilstandsbaserte verktøy for fokus, feil og deaktiverte tilstander. For eksempel fremhever focus:outline-none og focus:ring-2 focus:ring-blue-500 et inndatafelt når det får fokus, slik at brukeren tydelig ser hvor de skriver. For feilmeldinger indikerer border-red-500 og text-red-600 visuelt problemer, mens disabled:bg-gray-100 og disabled:cursor-not-allowed tydeliggjør når et felt ikke kan brukes. Etiketter kan styles med block, mb-1 og font-medium for riktig avstand og vekt, slik at skjemaene blir både attraktive og tilgjengelige.

Se dette eksempelet på en React-skjema komponent stylet med Tailwind. Den inkluderer et tekstfelt med etikett og viser ulike stiler for normal, fokus, feil og deaktivert tilstand. Du kan se hvordan hver tilstand håndteres ved hjelp av 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>
  );
}

Dette skjemaet bruker Tailwind-verktøy for å 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;
• Feiltilstand: border-red-500, text-red-600, og en feilmelding i text-red-600;
• Deaktivert tilstand: bg-gray-100, cursor-not-allowed.

Ved å kombinere disse verktøyene kan du lage skjemaer som er visuelt tydelige, tilgjengelige og responsive for brukerinteraksjon.