Survey Options Builder

ProNew

Build the answer options of a question: at least two, an optional "Other" option kept last, duplicate labels flagged, and a preview of the question as a respondent sees it. Use this when authors create choice questions.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

People create multiple-choice questions and need guard rails: no duplicates, enough options, an "Other" that stays at the end.

Do not use it when: For a full survey editor with logic and pages, build on top of this; it covers one question.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`string[]`	Starting options.
`onChange`	`({ options, allowOther }) => void`	After every edit.

Accessibility

Options are Field Array rows with numbered labels; duplicates and "too few" are explained in text, with an alert on the duplicate row.
"Other" is a checkbox that adds a fixed last choice in the preview, so it can never be reordered into the middle.
The preview is a fieldset with a legend and a real radio group, so authors can test the keyboard behaviour respondents will get.

Testing

The pattern ships with a Testing Library test (survey-options-builder.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

People create multiple-choice questions and need guard rails: no duplicates, enough options, an "Other" that stays at the end.

Do not use it when: For a full survey editor with logic and pages, build on top of this; it covers one question.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`initial`	`string[]`	Starting options.
`onChange`	`({ options, allowOther }) => void`	After every edit.

Accessibility

Options are Field Array rows with numbered labels; duplicates and "too few" are explained in text, with an alert on the duplicate row.
"Other" is a checkbox that adds a fixed last choice in the preview, so it can never be reordered into the middle.
The preview is a fieldset with a legend and a real radio group, so authors can test the keyboard behaviour respondents will get.

Testing

The pattern ships with a Testing Library test (survey-options-builder.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.