Prompt

A keyboard-driven picker for a single question or a chain of follow-ups, with a write-in row for free-text answers.

Anatomy

A root holds the active step, a footer, and the answer state. Each step carries a question and a list of option rows. A write-in row is a separate part so its focus and submit behavior stay distinct from the regular rows.

For a chain of follow-ups, stack more steps. The same footer covers the whole flow. The root advances through steps in JSX order and fires onComplete once at the end with every answer keyed by step name.

Keyboard

• ↑ ↓ move the highlight, clamping at the ends.
• 1 to 9 jump to that numbered row.
• Enter submits the highlighted row. An empty write-in is a no-op.
• Esc dismisses the picker.
• Shift+Tab or ← goes back one step. The left arrow is ignored while typing in a write-in row so the caret can move inside the text.

API

Reference for each part of the component, including its available props and behavior.

Prompt

The root. Renders only the active step at a time, holds the answer state, and owns the keyboard handler. Auto-focuses on mount so the picker is ready for keys without a click. Resets its internal state after onComplete or onDismiss fires; to force a reset mid-flow, change the key prop.

For a single question, render one <PromptStep>. onAnswer and onComplete both fire on the only submit, in that order. answers always arrives as a Record<name, value>, so consumers read the value from the step name.

PromptStep

One step in the flow. Declares its name and an optional default highlight. Only the active step renders, so any expensive children inside an inactive step are skipped. The first step is active on mount.

PromptQuestion

The question text at the top of a step. Plain styled text, no behavior. Each step renders its own.

PromptOption

A single predefined answer row. Carries a value that ends up in the answers record when the row is submitted. The number prefix is computed from the row's position in the step, so reordering options just works.

Hover highlights the row, click submits it. The behavior matches a keyboard pick so the mouse and the keyboard agree on what a row press means.

PromptOptionOther

The write-in row. Renders an inline input that takes focus as soon as the row is highlighted, so the user can move down with the arrow and start typing in the same gesture. Submitting passes the typed string as value, with isOther: true in the onAnswer context so consumers can distinguish a free-text answer from a predefined one.

Empty submissions are ignored, so the user does not accidentally finalize a blank write-in by pressing Enter.

PromptFooter

The footer below the active step. Outside <PromptStep> so it stays visible across step changes. A flex row aligned to the end; place hints first and the submit button last.

PromptHint

A small label paired with a key cap. Free-form keys so authors mix shortcuts without a fixed vocabulary. Pure visual hint, no behavior.

PromptSubmit

Headless submit control rendered as the kit's Button. Wires the root's submit action onto the click. Pass children to override the label; the corner-arrow icon is added after the label.

usePrompt

Hook for reading the active step and triggering navigation from a custom part. Returns { currentStep, stepIndex, totalSteps, partial, submit, back, dismiss, canBack }. Useful for a step indicator inside the footer or a custom back button.