# @askrjs/ui/focus-scope

> Published API exports for @askrjs/ui/focus-scope.

Source: [https://askrjs.com/docs/reference/api/ui/focus-scope](https://askrjs.com/docs/reference/api/ui/focus-scope)

Status: stable. Packages: @askrjs/ui/focus-scope.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 6 exports from the declarations shipped by @askrjs/ui.

### `FOCUS_SCOPE_A11Y_CONTRACT`

```ts
FOCUS_SCOPE_A11Y_CONTRACT: { readonly FEATURES: { readonly trapped: true; readonly loop: true; readonly autoFocus: true; readonly restoreFocus: true; }; }
```

Focus scope accessibility contract.

### `FocusScope`

```ts
FocusScope: { (props: FocusScopeProps): JSX.Element; (props: FocusScopeAsChildProps): JSX.Element; }
```

Renders a part of `focus-scope`.

Supports polymorphic rendering via `asChild`.

### `FocusScopeA11yContract`

```ts
FocusScopeA11yContract: typeof FOCUS_SCOPE_A11Y_CONTRACT
```

Type of the Focus Scope A11y Contract object.

### `FocusScopeAsChildProps`

```ts
FocusScopeAsChildProps: FocusScopeOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}
```

Props for the `asChild` (polymorphic) rendering of Focus Scope.

- `asChild`: asChild: true;

- `autoFocus`: autoFocus?: boolean | undefined;

- `children`: children: JSXElement;

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `ref`: ref?: Ref<Element>;

- `restoreFocus`: restoreFocus?: boolean | undefined;

- `tabIndex`: tabIndex?: number | undefined;

- `trapped`: trapped?: boolean | undefined;

### `FocusScopeOwnProps`

```ts
FocusScopeOwnProps: {
  children?: unknown;
  trapped?: boolean;
  loop?: boolean;
  autoFocus?: boolean;
  restoreFocus?: boolean;
  id?: string;
  tabIndex?: number;
}
```

Own props for Focus Scope, before merging with native element attributes.

- `autoFocus`: autoFocus?: boolean | undefined;

- `children`: children?: unknown;

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `restoreFocus`: restoreFocus?: boolean | undefined;

- `tabIndex`: tabIndex?: number | undefined;

- `trapped`: trapped?: boolean | undefined;

### `FocusScopeProps`

```ts
FocusScopeProps: Omit<JSX.IntrinsicElements['div'], 'children' | 'ref'> & FocusScopeOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLDivElement>;
}
```

Props for Focus Scope.

- `asChild`: asChild?: false | undefined;

- `autoFocus`: autoFocus?: boolean | undefined;

- `children`: children?: unknown;

- `id`: id?: string | undefined;

- `loop`: loop?: boolean | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

- `restoreFocus`: restoreFocus?: boolean | undefined;

- `tabIndex`: tabIndex?: number | undefined;

- `trapped`: trapped?: boolean | undefined;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/dropdown/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/hover-card/index.md)