LayerScope

Puts its children on a named layer, optionally trapping focus.

import { LayerScope } from '@textui/core';

<LayerScope scopeId="inspector" trap>
  <text content="focus cannot leave this subtree" />
</LayerScope>

Props

| Prop | Type | Default | | | — | — | — | — | | scopeId | string | required | | | trap | boolean | | | | children | ComponentNode \| ComponentNode[] | | |

The building block under Dialog and the menus. Reach for it when you need modal behaviour around something that is not a dialog - an inline editor that must keep the keyboard until it is finished, for instance.

trap keeps tab inside the subtree. Without it the scope groups for dismissal and ordering but focus still moves through as usual.

See also

  • Layers - the planes and their order
  • Focus - scopes and traps
  • Dialog - this, already assembled

Back to top

MIT licensed. Pre-1.0 - the surface is still moving.