focus accessibility panel keyboard form grouped Tailwind form fields settings cards with multiple controls search bars or prompt panels with several focusable children keyboard focus is visible on the input but not on the containing surface grouped panels feel disconnected during keyboard navigation need a single state for multi-control cards
Focus Within Panel
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/focus-within-panel.json
Grouped focus
Background
Customize
Quick Start
<div class="focus-within-panel rounded-3xl border border-white/10 bg-slate-950/80 p-4 text-white">...</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion, @supports fallback
- Size
- 436 bytes · 16 lines
- Custom Properties
-
--focus-within-accent--focus-within-shadow - Classes
-
.focus-within-panel
focus accessibility panel keyboard form
Useful when a whole card or settings block should react to keyboard focus, not just the specific input inside it. It makes grouped UI feel more connected and easier to scan for keyboard users.