Passed a few quality of life improvements on two most-requested tweaks for the AskUserQuestions component:

• Freeform “other” option is now a real textarea
• New chip layout variant (left-aligned)

The reception on this component has been unreal with teams are already implementing it in production and triggering great discussions.

Community-driven open source at its best. http://fluidfunctionalism.com/docs/ask-user-questions…

Keep the feedback coming, it’s shaping everything.

Fluid Functionalism

Source: https://www.fluidfunctionalism.com/docs/ask-user-questions

AskUserQuestions

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

Installation

Example

Multiple questions

Multi-select

With other

Skippable

Chip on left

Stacked layout

Controlled

API Reference — AskUserQuestions

PropTypeDefaultDescriptionquestionsAskUserQuestion[]—Ordered list of questions to ask. 2–5 options per question is recommended.currentIndexnumber—Controlled index of the active question.defaultCurrentIndexnumber0Initial question index (uncontrolled mode).onCurrentIndexChange(index: number) => void—Called when the active question changes.answersRecord<string, AskUserAnswer>—Controlled answers map keyed by question id.defaultAnswersRecord<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.skipLabelstring“Skip“Label for the skip control in the header.

API Reference — AskUserQuestion

PropTypeDefaultDescriptionidstring—Stable identifier used to key the answer. Falls back to position.titlestring—Question text shown above the options.optionsAskUserOption[]—2–5 options to choose from.multiSelectbooleanfalseAllow multiple options to be selected. Adds a Next button at the bottom.allowOtherbooleanfalseRender an always-visible inline textarea for free-form, multi-line answers. Enter submits (single-select); Shift+Enter inserts a newline.otherPlaceholderstring“Describe in your own words…“Placeholder for the Other textarea.skippablebooleantrueShow the Skip control in the header.nextLabelstring—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.chipPosition“left” | “right”“right“Which side of the row the numbered chip sits on. With ‘left’, the single-select submit arrow still appears on the row’s right edge. Works with single/multi-select, allowOther, and inline/stacked layouts.

API Reference — AskUserOption

PropTypeDefaultDescriptionidstring—Stable identifier returned in the answer. Falls back to position.titlestring—Bold leading label for the option.descriptionstring—Secondary muted text shown after the title.

API Reference — AskUserAnswer

PropTypeDefaultDescriptionquestionIdstring—Id of the question this answer belongs to.selectedIdsstring[]—Selected option ids. Length 0–1 in single-select, 0–N in multi-select.otherTextstring—Free-form text from the Other input, if any.skippedboolean—True when the user skipped the question.