tuil
ReferenceComponentsWorkflow UI

HelpOverlay

HelpOverlay component API, behavior, and executable example.

View rawEdit

Loading executable example…

API and events

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

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

Props, functions, and events

MemberTypeRequiredDescriptionRelated types
idstring | undefinedNoThe id member uses the string | undefined contract.
openboolean | undefinedNoThe open member uses the boolean | undefined contract.
defaultOpenboolean | undefinedNoThe defaultOpen member uses the boolean | undefined contract.
onOpenChange((open: boolean) => void | Promise<void>) | undefinedNoThe onOpenChange member uses the ((open: boolean) => void | Promise<void>) | undefined contract.
hotkeystring | undefinedNoThe hotkey member uses the string | undefined contract.
titlestring | undefinedNoThe 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

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

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

On this page