Стилізація Форм і Полів Введення

Під час створення інтерфейсів користувача в React, форми та елементи введення є ключовими для збору даних користувача. Tailwind CSS пропонує потужний набір утиліт, які дозволяють стилізувати поля введення, підписи та стани валідації для створення акуратного та доступного досвіду. Можна використовувати базові утиліти, такі як border, rounded, px та py, щоб визначити форму та відступи для полів введення. Для кольору та контрасту утиліти на кшталт bg-white, text-gray-700, border-gray-300 і placeholder-gray-400 допомагають підтримувати чіткість і читабельність.

Для покращення взаємодії користувача Tailwind надає утиліти для станів фокусу, помилки та вимкнення. Наприклад, focus:outline-none і focus:ring-2 focus:ring-blue-500 виділяють поле введення при фокусі, чітко показуючи, де користувач вводить дані. Для стану помилки border-red-500 і text-red-600 візуально позначають проблему, а disabled:bg-gray-100 і disabled:cursor-not-allowed дають зрозуміти, що з полем не можна взаємодіяти. Підписи можна стилізувати за допомогою block, mb-1 і font-medium для правильного розташування та акцентування, забезпечуючи привабливість і доступність форм.

Розгляньте цей приклад компонента форми React, стилізованого за допомогою Tailwind. Він містить текстове поле з підписом і демонструє різні стилі для звичайного, фокусного, помилкового та вимкненого станів. Ви можете побачити, як кожен стан обробляється за допомогою класів Tailwind.

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

Ця форма використовує утиліти Tailwind для обробки наступних станів:

• Звичайний стан: border-gray-300, text-gray-700, bg-white;
• Стан фокусу: focus:ring-2, focus:ring-blue-500, focus:outline-none;
• Стан помилки: border-red-500, text-red-600 і повідомлення про помилку в text-red-600;
• Вимкнений стан: bg-gray-100, cursor-not-allowed.

Комбінуючи ці утиліти, можна створювати форми, які є візуально зрозумілими, доступними та чутливими до взаємодії користувача.