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();
    }
}