Formulieren en Invoervelden Stylen

Bij het bouwen van gebruikersinterfaces in React zijn formulieren en invoerelementen essentieel voor het vastleggen van gebruikersgegevens. Tailwind CSS biedt een krachtig scala aan utilities waarmee je invoervelden, labels en validatiestaten kunt stylen voor een verzorgde, toegankelijke ervaring. Gebruik basisutilities zoals border, rounded, px en py om de vorm en ruimte van je invoervelden te bepalen. Voor kleur en contrast helpen utilities zoals bg-white, text-gray-700, border-gray-300 en placeholder-gray-400 om duidelijkheid en leesbaarheid te behouden.

Om de gebruikerservaring te verbeteren, biedt Tailwind utilities op basis van status voor focus-, fout- en uitgeschakelde statussen. Bijvoorbeeld, focus:outline-none en focus:ring-2 focus:ring-blue-500 markeren een invoerveld wanneer het focus krijgt, zodat gebruikers duidelijk zien waar ze typen. Voor foutstaten geven border-red-500 en text-red-600 visueel problemen aan, terwijl disabled:bg-gray-100 en disabled:cursor-not-allowed duidelijk maken wanneer een invoerveld niet gebruikt kan worden. Labels kunnen worden gestyled met block, mb-1 en font-medium voor correcte afstand en nadruk, zodat formulieren zowel aantrekkelijk als toegankelijk zijn.

Bekijk dit voorbeeld van een React-formuliercomponent gestyled met Tailwind. Het bevat een tekstinvoer met label en toont verschillende stijlen voor normale, focus-, fout- en uitgeschakelde statussen. Je ziet hoe elke status wordt afgehandeld met Tailwind-klassen.

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

Dit formulier gebruikt Tailwind utilities om het volgende te regelen:

• Normale status: border-gray-300, text-gray-700, bg-white;
• Focusstatus: focus:ring-2, focus:ring-blue-500, focus:outline-none;
• Foutstatus: border-red-500, text-red-600 en een foutmelding in text-red-600;
• Uitgeschakelde status: bg-gray-100, cursor-not-allowed.

Door deze utilities te combineren, kun je formulieren maken die visueel duidelijk, toegankelijk en responsief zijn voor gebruikersinteractie.