Next ❯

States & Interactions

  • Understand and implement interactive UI states for modern web interfaces.

  • What Are “States” in UI Design ?

    A state represents the current condition of an element based on:

    • User interaction

    • System behavior

    • Validation status

    • Component lifecycle

    Examples of states:

    • Default

    • Hovered

    • Focused

    • Active (pressed)

    • Disabled

    • Error

    • Success

    • Loading

    Without states, UI feels dead and unresponsive.

    In modern applications, users expect instant visual feedback for every action.

    What Are Pseudo Classes ? (Core Concept)

    Pseudo classes are special selectors that apply styles only when an element is in a specific state.

    They do NOT create new elements.
    They describe conditions.

    Examples (CSS concept):

    • :hover

    • :focus

    • :active

    • :disabled

    • :checked

    In Tailwind CSS, pseudo classes are handled using state variants, not traditional selectors.

  • Why States & Interactions Are Critical in Real UI

    States help users understand:

    • What can be clicked

    • What is currently selected

    • Where keyboard focus is

    • Whether an action succeeded or failed

    • Whether an element is disabled or loading

    Good state handling:

    • Improves usability

    • Builds trust

    • Reduces confusion

    • Enhances accessibility

    Bad or missing states:

    • Make UI feel broken

    • Confuse users

    • Cause accessibility issues

    How Tailwind Handles States

    Traditional CSS:

    button:hover { background: blue; }

    Tailwind approach:

    <button class="hover:bg-blue-500">

    Key idea:

    State is added as a prefix to a utility class.

    This keeps:

    • Styles readable

    • States explicit

    • Code predictable

  • Types of States

    We can group states into categories:

    Interaction States

    Triggered by user actions:

    • Hover

    • Focus

    • Active

    • Focus-visible

    Form States

    Triggered by input condition:

    • Disabled

    • Checked

    • Required

    • Invalid

    • Valid

    Structural States

    Triggered by DOM structure:

    • First-child

    • Last-child

    • Odd / Even

    • Empty

    Group & Peer States

    Triggered by related elements:

    • Group hover

    • Peer focus

    • Peer checked

    These allow component-level interactions.

    Default vs Interactive State 

    Every element has:

    • A default state

    • One or more interactive states

Hover Button State

Changes the button background color when hovered. 

<button class="bg-blue-500 hover:bg-blue-600">
</button>

  • Default:

    • bg-blue-500

    On hover:

    • bg-blue-600

    You should always design:

    1. Default state first

    2. Interaction states second

      States Are Additive, Not Replacements

    Input Focus State

    Changes border color and adds a ring when the input is focused. 

    <input
  class="border border-gray-300
         focus:border-blue-500 focus:ring-2"
/>

      • Default → gray border

      • Focus → blue border + ring

      This layering is intentional.

      State Order & Priority

      Some states have higher priority than others.

      Typical priority:

      1. Disabled

      2. Focus

      3. Hover

      4. Default

      Example rule:

      Disabled elements should not respond to hover.

      Professional UI respects this hierarchy.

    • Accessibility & States

      States are essential for accessibility, especially:

      • Focus (keyboard users)

      • Disabled (screen readers)

      • Checked / selected states

      If focus states are missing:

      • Keyboard navigation becomes impossible

      If disabled states are unclear:

      • Users get confused

      States are not decoration - they are communication.

      Visual Feedback & User Trust

      When a user:

      • Hovers → something should change

      • Clicks → something should respond

      • Tabs → focus should be visible

      • Submits → feedback should appear

      No feedback = broken experience.

      State-driven UI feels:

      • Responsive

      • Reliable

      • Professional

      Common Beginner Mistakes

      • Styling only hover, ignoring focus

      • Removing focus styles

      • Using hover styles on touch-only elements

      • Inconsistent state behavior

      • Ignoring disabled and error states

      If UI looks good but feels bad → states are incomplete.

    Next ❯