❮ Previous Next ❯

Advanced States

  • Implement complex and scalable UI state management techniques.

  • As UI grows more complex, basic states (hover, focus, active) are not enough.
    Modern applications need smarter, more context-aware states.

    This lesson covers two advanced but extremely important states:

    • focus-visible

    • focus-within

    These states are critical for:

    • Accessibility

    • Keyboard navigation

    • Clean UI without visual noise

    • Professional UX behavior

      Why Advanced Focus States Exist

      Problem with basic focus:

      • Focus appears on mouse click

      • Focus appears on keyboard navigation

      • Same style for different input methods

      This causes:

      • Unwanted focus rings on mouse clicks

      • Designers removing focus styles (bad!)

      • Accessibility issues

      Advanced focus states solve this cleanly.

    • Focus-visible

      What Is Focus-visible ?

      Focus-visible represents the state where an element:

      • Receives focus AND

      • The browser decides that focus indicator should be visible

      In simple words:

      Focus styles appear only when needed, mainly for keyboard users.

      Why Focus-visible Is Important

      Focus-visible helps:

      • Keyboard users see focus clearly

      • Mouse users avoid unnecessary outlines

      • Designers keep clean UI

      • Accessibility without visual clutter

      It solves the classic problem:

      “I want focus for keyboard, but not for mouse clicks.”

      How Focus-visible Works

      • Mouse click → focus, but no ring

      • Keyboard navigation (Tab) → focus with visible ring

      This is smart focus handling, not removal.

      Focus vs Focus-visible

      FocusFocus-visible
      Triggered by any focusTriggered when focus should be visible
      Mouse + KeyboardMostly Keyboard
      Always showsContext-aware
      Can feel noisyClean & accessible

    Focus Visible Styling

    Shows how focus-visible styles improve accessibility in CSS and Tailwind. 

    /* Traditional CSS */
button:focus-visible {
  outline: 2px solid blue; /* visible focus outline */
}

/* Tailwind CSS */
<button
  class="focus:outline-none  /* remove default outline */
         focus-visible:ring-2  /* add ring on keyboard focus */
         focus-visible:ring-blue-500"  /* ring color */
>
  Save
</button>

    • What’s Happening

      • focus:outline-none removes default outline

      • focus-visible:ring-2 adds ring only when needed

      • Mouse click → no ring

      • Keyboard tab → visible ring

      This is best-practice UI.

      Where Focus-visible Should Be Used

      • Buttons

      • Links

      • Custom components

      • Icon buttons

      • Navigation items

      Basically:

      Anything interactive that users tab through.

      Common Beginner Mistakes

      • Removing focus without adding focus-visible

      • Using focus instead of focus-visible everywhere

      • Ignoring keyboard testing

      • Inconsistent focus styles

      Accessibility Rule 

      Removing focus styles
      Replacing them with focus-visible styles

      Never ship UI without visible keyboard focus.

    • Focus-within

      What Is Focus-within ?

      Focus-within applies to a parent element when:

      • Any of its child elements receives focus

      In simple words:

      Parent reacts when something inside it is focused.

      Why Focus-within Is Needed

      Without focus-within:

      • Forms feel disconnected

      • Input focus looks isolated

      • Containers don’t provide context

      With focus-within:

      • Entire form section highlights

      • Groups feel interactive

      • UX becomes clearer

        Real-Life Use Cases of Focus-within

        • Input groups

        • Form sections

        • Search bars

        • Card-based forms

        • Login / signup blocks

      Focus Within Styling

      Shows how parent reacts when child input is focused using focus-within. 

      /* Traditional CSS */
.form-group:focus-within {
  border-color: blue; /* parent changes when child is focused */
}

/* Tailwind CSS */
<div
  class="border border-gray-300
         focus-within:border-blue-500  /* border change */
         focus-within:ring-2  /* add ring */
         focus-within:ring-blue-400  /* ring color */
         p-4"
>
  <input class="outline-none w-full" />
</div>

      • What’s Happening

        • Input gets focus

        • Parent container highlights

        • User understands context of focus

          Why Focus-within Feels Professional

          Focus-within:

          • Guides the user visually

          • Reduces cognitive load

          • Improves form clarity

          • Feels intentional

          This is common in:

          • Banking apps

          • SaaS dashboards

          • High-quality forms

            Focus-within vs Group Focus

            Focus-withinGroup Focus
            AutomaticManual
            SemanticUtility-based
            Form-drivenComponent-driven
            Accessibility-friendlyInteraction-focused

            Both are useful - focus-within is form-first.

            Combining Focus-visible + Focus-within

          Advanced Focus Handling in Forms

          Shows how to combine focus-visible and focus-within for better form UX. 

          /* combining parent + child focus behavior */
<div
  class="border
         focus-within:border-blue-500  /* parent reacts */
         focus-within:ring-2
         focus-within:ring-blue-400"
>
  <input
    class="w-full
           focus:outline-none  /* remove default */
           focus-visible:ring-0"  /* prevent double ring */
  />
</div>

          • Result:

            • Keyboard users get visible focus

            • Container highlights correctly

            • No double rings

            • Clean UX

              Common Mistakes

              • Applying focus styles only to input

              • Ignoring parent context

              • Over-highlighting containers

              • Forgetting padding & spacing

                When to Use Which

                Use focus-visible when:

                • You care about keyboard users

                • You want clean UI on mouse click

                • You’re styling individual elements

                Use focus-within when:

                • Working with forms

                • Grouping inputs

                • Highlighting sections

              ❮ Previous Next ❯