Tailwind CSS Academy · Lesson

Disabled and Placeholder Variants

Style disabled form elements with disabled:* and customize placeholder text appearance with placeholder:* variants.

Styling Form States

Form elements exist in multiple states beyond just default and focused. When an input is disabled, it should look visually distinct and signal that interaction is not possible. When it is empty, placeholder text hints at what the user should type. Tailwind provides the disabled: and placeholder: variant prefixes to style these specific states declaratively in HTML, without needing custom CSS rules.

<!-- Disabled and placeholder states side by side -->
<div class="space-y-3 max-w-sm">
  <input type="text" placeholder="Type something here" class="w-full border rounded px-3 py-2 placeholder:text-gray-400" />
  <input type="text" placeholder="Read only" disabled class="w-full border rounded px-3 py-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-100" />
</div>

disabled: Variant Basics

The disabled: variant applies when a form element has the HTML disabled attribute. The most common styling pattern is disabled:opacity-50 disabled:cursor-not-allowed — reducing opacity to signal unavailability and switching the cursor to a blocked icon to prevent confusion. You can also add disabled:bg-gray-100 to give disabled inputs a distinctive background color that reinforces they are read-only.

<!-- Disabled form inputs with clear visual treatment -->
<div class="space-y-3 max-w-sm">
  <input
    type="text"
    value="Active input"
    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
  />

  <input
    type="text"
    value="Disabled input"
    disabled
    class="w-full border border-gray-300 rounded-lg px-4 py-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400"
  />
</div>

All lessons in this course

← Back to Tailwind CSS Academy