# HelpOverlay

Source: /tuil/docs/reference/components/workflow/help-overlay
Locale: en

HelpOverlay component API, behavior, and executable example.





{/* Generated by tooling/docs/generate-reference.ts. */}

<PublishedStory storyId="component-acceptance" variant="Workflow" />

## API and events [#api-and-events]

Bind observable workflow and operation snapshots to guided terminal flows, progress, errors, cancellation, splash state, and contextual help.

```tsx
export function HelpOverlay({
  id = "help",
  open,
  defaultOpen = false,
  onOpenChange,
  hotkey = "f1",
  title = "Keyboard help",
}: HelpOverlayProps): ReactNode;
```

### Props, functions, and events [#props-functions-and-events]

| Member         | Type                                                      | Required | Description                                                                                            | Related types |
| -------------- | --------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------ | ------------- |
| `id`           | `string \| undefined`                                     | No       | The `id` member uses the `string \| undefined` contract.                                               | —             |
| `open`         | `boolean \| undefined`                                    | No       | The `open` member uses the `boolean \| undefined` contract.                                            | —             |
| `defaultOpen`  | `boolean \| undefined`                                    | No       | The `defaultOpen` member uses the `boolean \| undefined` contract.                                     | —             |
| `onOpenChange` | `((open: boolean) => void \| Promise<void>) \| undefined` | No       | The `onOpenChange` member uses the `((open: boolean) => void \| Promise<void>) \| undefined` contract. | —             |
| `hotkey`       | `string \| undefined`                                     | No       | The `hotkey` member uses the `string \| undefined` contract.                                           | —             |
| `title`        | `string \| undefined`                                     | No       | The `title` member uses the `string \| undefined` contract.                                            | —             |

The runner emits the complete `workflow:*` lifecycle; operation components reflect operation snapshots and callbacks.

Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.

## Interaction and capabilities [#interaction-and-capabilities]

Controls call the runner's next, back, skip, retry, cancel, and rollback operations with transition locking.

The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.

## Complete import [#complete-import]

```tsx
import { HelpOverlay } from "@/components/tuil/workflows/workflow";
```