Lomakkeiden ja Syötekenttien Tyylittely

React-käyttöliittymien rakentamisessa lomakkeet ja syötekentät ovat keskeisiä käyttäjätietojen keräämisessä. Tailwind CSS tarjoaa tehokkaan valikoiman apuluokkia, joiden avulla voit tyylitellä syötekenttiä, nimikkeitä ja validointitiloja viimeistellyn ja saavutettavan käyttökokemuksen takaamiseksi. Perusluokkia, kuten border, rounded, px ja py, voidaan käyttää syötekenttien muodon ja tilan määrittelyyn. Väriä ja kontrastia varten luokat kuten bg-white, text-gray-700, border-gray-300 ja placeholder-gray-400 auttavat säilyttämään selkeyden ja luettavuuden.

Käyttäjäkokemuksen parantamiseksi Tailwind tarjoaa tilapohjaisia apuluokkia esimerkiksi fokus-, virhe- ja poissa käytöstä -tiloihin. Esimerkiksi focus:outline-none ja focus:ring-2 focus:ring-blue-500 korostavat syötekenttää, kun siihen kohdistetaan fokus, tehden selväksi käyttäjälle, missä hän kirjoittaa. Virhetiloissa border-red-500 ja text-red-600 ilmaisevat visuaalisesti ongelmat, kun taas disabled:bg-gray-100 ja disabled:cursor-not-allowed osoittavat, ettei kenttää voi käyttää. Nimikkeitä voidaan tyylitellä luokilla block, mb-1 ja font-medium oikeanlaisen välistyksen ja korostuksen saavuttamiseksi, mikä varmistaa, että lomakkeet ovat sekä houkuttelevia että saavutettavia.

Tarkastellaan esimerkkiä React-lomakekomponentista, joka on tyylitelty Tailwindilla. Se sisältää tekstisyötteen nimikkeellä ja näyttää erilaiset tyylit normaalille, fokus-, virhe- ja poissa käytöstä -tiloille. Näet, miten kukin tila käsitellään Tailwind-luokkien avulla.

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

Tämä lomake hyödyntää Tailwind-apuluokkia seuraavasti:

• Normaali tila: border-gray-300, text-gray-700, bg-white;
• Fokus-tila: focus:ring-2, focus:ring-blue-500, focus:outline-none;
• Virhetila: border-red-500, text-red-600 sekä virheilmoitus text-red-600;
• Poissa käytöstä -tila: bg-gray-100, cursor-not-allowed.

Yhdistämällä näitä apuluokkia voit luoda lomakkeita, jotka ovat visuaalisesti selkeitä, saavutettavia ja reagoivat käyttäjän toimintaan.