FocusGroup

Combine multiple components into one tab stop using a focus group.

Examples

Contents

UsageAPIs

Usage

Use a focus zone as your primary element if you want to support arrow-key navigation. Focus zones contain focus groups, so you'll still be able to consume the focus group context.

Look at the getChild function below to see how to consume a focus group context in your components and pages.

APIs

IFocusGroupProps

defaultElementId
string
The id of the element to be treated as the default focusable element of the group.

IFocusGroupContext

focusedElementIdoptional
string
The id of the element that has received focus. Should be used by the component that is consuming the context to determine whether tabIndex=1 or tabIndex=0 should be placed on the element.
onFocus
(elementId: string) => void
Callback to be invoked when the element has received a DOM focus event.

IFocusGroup

focus
(elementId?: string): void
Set focus within the focus group. If no elementId is provided, focus will be set to the last focused element of the group. If the group has not yet received focus, focus will be set to the default element.