# FocusManagement

```ts
import { FocusManagement, Rectangle } from "@pibbl/core";
```

`FocusManagement` uses [`FocusManagementProps`](/reference/types/elements-components/#focusmanagementprops) and wraps one recursive
[`PibblNode`](/reference/types/elements-components/#pibblnode) subtree. It installs the [`Canvas`](/reference/types/canvas-runtime/#canvas) as the only native focus host and
adds logical focus events, source-order Tab traversal, press focus, activation,
and focus-visible modality. It does not generate semantic DOM or an
accessibility tree.

```tsx
<FocusManagement>
  <Rectangle style={{ width: 80, height: 32, fill: "#2563eb" }} />
</FocusManagement>
```

Try the [Focus management live example](/playground/#/examples/focus-and-keyboard/focus-management).

## API details from source

<span id="api-FocusManagement"></span>

Adds one logical focus manager to exactly one child without adding identity.

```ts
FocusManagement: PibblComponent<FocusManagementProps>
```

Related API: [FocusManagement](/reference/components/focus-management/), [PibblComponent](/reference/types/elements-components/#pibblcomponent), [FocusManagementProps](/reference/types/elements-components/#focusmanagementprops).

### Parameters

- **`props`** — Authored component inputs, supplied through JSX or createElement. See the linked
props and style types.

### Throws

When called directly; Pibbl mounts this component through JSX or createElement.

### See also

[FocusManagementProps](/reference/types/elements-components/#focusmanagementprops)

[View source — packages/core/src/lib/focus/policy-components.ts:99](/source/packages/core/src/lib/focus/policy-components-ts/#L99)

## Implementation guidance for agents

Read the [Input, focus, and native HTML companion](/agents/topics/input/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Focus and arrow navigation](/minimal-examples/events/focus/): Two logical targets participate in Tab focus and directional keyboard navigation. [Plain source](/minimal/events/focus.tsx)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.