Focus Scope
Manages focus within a component boundary with support for trapping and looping focus navigation.
Focus Scope provides enhanced control over keyboard focus management within component boundaries. It can trap focus within its container and optionally loop focus navigation, making it ideal for modal interfaces and other interactive components that need to manage focus states.
API Reference
Prop | Default | Type |
---|---|---|
loop | false | InputSignalWithTransform<boolean, BooleanInput> When `true` , tabbing from last item will focus first tabbable and shift+tab from first item will focus last tababble. |
trapped | false | InputSignalWithTransform<boolean, BooleanInput> When `true` , focus cannot escape the focus scope via keyboard, pointer, or a programmatic focus. |
Emit | Payload |
---|---|
mountAutoFocus |
[value: Event]
Event handler called when auto-focusing on mount. Can be prevented. |
unmountAutoFocus |
[value: Event]
Event handler called when auto-focusing on unmount. Can be prevented. |
Example
Basic usage with focus trapping
<div rdxFocusScope trapped>
<button>Action 1</button>
<button>Action 2</button>
<button>Close</button>
</div>
With Focus Looping
Enable both trapping and looping for complete focus management:
<div rdxFocusScope trapped loop>
<button>Action 1</button>
<button>Action 2</button>
<button>Close</button>
</div>
Handling Focus Event
...
template: `
<div
(mountAutoFocus)="handleMountFocus($event)"
(unmountAutoFocus)="handleUnmountAutoFocus($event)"
rdxFocusScope
trapped
loop
>
<button>Action 1</button>
<button>Action 2</button>
<button>Close</button>
</div>
`
...
export class FocusScopeEvents {
handleMountFocus(event: Event) {
// Prevent default auto-focus behavior if needed
event.preventDefault();
}
}