Focus
Makes any element keyboard-focusable with a visible focus ring indicator. The ring appears only for keyboard navigation (Tab), not mouse clicks.
Basic Usage
Wrap any content in Focus to make it tabbable. Press Tab to see the focus ring.Focusable box
Another focusable
Custom Focus Ring Color
Override the global focus color per-component using the focusRing prop.Red ring
Green ring
Purple ring
Disabled Focus
Set disabled=true to remove an element from the tab order.Focusable
Disabled
Focusable
Focus Change Callback
Use onFocusChange to respond when focus enters or leaves. Note: this fires for all focus events, not just keyboard focus.Focus me
useAncestorFocused Hook
Child components can detect keyboard focus on their ancestor Focus using this hook. Returns true only for keyboard focus (not mouse clicks).Parent FocusClick or Tab to focus
Tab Index
Customize tab order with the tabIndex prop. Default is 0.Tab 3
Tab 1
Tab 2