AskUserQuestions

Stepped question flow with 2–5 options, single or multi-select, inline 'other' input, optional skip, and multi-question navigation.

Installation

Example

Question 1 of 8

How do you plan to use BoringUI?

Designer Prototyping flows and pages

Engineer Shipping production UI

PM Aligning the team on patterns

Founder Bootstrapping a product

Multiple questions

Question 1 of 4

What's your role?

Designer Visual / interaction

Engineer Frontend / backend

PM Product / program

Researcher User / market research

Multi-select

Question 1 of 3

Which features should we prioritize?

Dark mode System-aware theme switching

Accessibility Screen-reader and keyboard support

Performance Faster initial load

Translations Multi-language support

With other

Question 1 of 3

What's blocking you most right now?

Scope Too much on the plate

Review Waiting on feedback

Infra Tooling slows me down

Skippable

Question 1 of 3

How long have you been using the product?

Less than a week Just getting started

A few months Comfortable with basics

Over a year Power user

Stacked layout

Question 1 of 8

Which starting template fits your project?

Marketing sitePolished landing page with hero, features grid, pricing table, and a footer. Best when you need to ship a story-driven page fast.

AI chat appFull conversation UI with InputMessage, ThinkingSteps, and message bubbles wired up. Ideal for assistants and copilots.

Admin dashboardSidebar shell, sortable data tables, and form-heavy detail views. Built for back-office tools and operational apps.

Onboarding flowStepped intake using AskUserQuestions with a progress indicator and inline validation. Great for setup wizards.

Controlled

Question 1 of 4

What's your role?

Designer Visual / interaction

Engineer Frontend / backend

PM Product / program

Researcher User / market research

API Reference — AskUserQuestions

Prop	Type	Default	Description
questions	AskUserQuestion[]	—	Ordered list of questions to ask. 2–5 options per question is recommended.
currentIndex	number	—	Controlled index of the active question.
defaultCurrentIndex	number	0	Initial question index (uncontrolled mode).
onCurrentIndexChange	(index: number) => void	—	Called when the active question changes.
answers	Record<string, AskUserAnswer>	—	Controlled answers map keyed by question id.
defaultAnswers	Record<string, AskUserAnswer>	—	Initial answers (uncontrolled mode).
onAnswersChange	(answers: Record<string, AskUserAnswer>) => void	—	Called whenever any answer changes.
onComplete	(answers: Record<string, AskUserAnswer>) => void	—	Called after the last question is answered or submitted.
onSkip	(questionId: string, index: number) => void	—	Called when the user clicks Skip on a question.
skipLabel	string	"Skip"	Label for the skip control in the header.

API Reference — AskUserQuestion

Prop	Type	Default	Description
id	string	—	Stable identifier used to key the answer. Falls back to position.
title	string	—	Question text shown above the options.
options	AskUserOption[]	—	2–5 options to choose from.
multiSelect	boolean	false	Allow multiple options to be selected. Adds a Next button at the bottom.
allowOther	boolean	false	Render an always-visible inline text input for free-form answers.
otherPlaceholder	string	"Describe in your own words…"	Placeholder for the Other input.
skippable	boolean	true	Show the Skip control in the header.
nextLabel	string	—	Label for the Next button in multi-select mode. Defaults to 'Next' or 'Finish'.
layout	"inline" \| "stacked"	"inline"	Row layout. 'stacked' places the description on its own line under the title — use when descriptions are long enough to wrap.

API Reference — AskUserOption

Prop	Type	Default	Description
id	string	—	Stable identifier returned in the answer. Falls back to position.
title	string	—	Bold leading label for the option.
description	string	—	Secondary muted text shown after the title.

API Reference — AskUserAnswer

Prop	Type	Default	Description
questionId	string	—	Id of the question this answer belongs to.
selectedIds	string[]	—	Selected option ids. Length 0–1 in single-select, 0–N in multi-select.
otherText	string	—	Free-form text from the Other input, if any.
skipped	boolean	—	True when the user skipped the question.