Selection Components

These components let users choose from a set of options. They are provided by the qnr-framework core and render inside a Centered Screen layout.

All selection components share the common question fields (questionId, required, screen, validations). This page documents the component-specific props configured in Strapi.

---

RadioForm (RADIO)

Single-select choice rendered as card-style buttons. Each option is a large, tappable card — not a traditional small radio circle. This is the most commonly used selection component.

Strapi props:

Prop	Type	Description
mapValue	object	Required. Maps each option value to its display. Values can be a plain string (used as the label) or an object with title and description for a richer card layout.
informationBox	object	Per-option info box that appears when a specific option is selected. Contains value (which option triggers it), title, and description.

mapValue examples:

Simple string mapping:

{
  "yes": "Yes, I have insurance",
  "no": "No, I don't have insurance"
}

Rich card mapping with descriptions:

{
  "basic": { "title": "Basic Plan", "description": "Essential coverage for everyday needs" },
  "premium": { "title": "Premium Plan", "description": "Comprehensive coverage with extras" }
}

Stored value: A single string (the selected option’s key from mapValue).

---

CheckboxForm (CHECKBOX)

Multi-select checkboxes rendered as card-style buttons, similar to RadioForm but allowing multiple selections.

Strapi props:

Prop	Type	Description
mapValue	object	Required. Same format as RadioForm — maps values to strings or {title, description} objects.

Stored value: An array of strings (the selected option keys).

---

BooleanForm (BOOLEAN)

Yes/No toggle rendered as two large buttons. A simplified version of RadioForm specifically for binary choices. No special props are needed — the two options (“Yes” and “No”) are built in.

The app extends BooleanForm with localized labels.

Strapi props: None specific. The screen’s question text frames the yes/no choice.

Stored value: A boolean (true for yes, false for no).

---

DropdownSingleForm (DROPDOWN_SINGLE)

Standard select dropdown. Useful when there are many options that would take too much space as radio cards.

Strapi props:

Prop	Type	Description
options	array	List of {value, label} objects defining the dropdown choices
returnValueAsString	boolean	When true, stores the value as a string instead of the default type
cmsList	relation	Links to an option-list content type in Strapi for CMS-managed options. When set, the dropdown pulls its options from the linked list instead of the inline options array.

Using cmsList: Instead of hardcoding options in the question, you can create an option-list entry in Strapi (Content Manager > Option-List) and link it here. This lets you reuse the same set of options across multiple questions and update them without touching each question individually.

Stored value: The value field of the selected option (string or number depending on returnValueAsString).

---

AutoSuggestForm (AUTOSUGGEST)

Type-ahead search input. As the user types, matching options are filtered and displayed in a dropdown. Useful for large option sets (e.g., list of professions, universities).

Strapi props:

Prop	Type	Description
options	array	List of selectable values
validate	string	Validation pattern identifier
cmsList	relation	Links to an option-list content type in Strapi for CMS-managed options

Stored value: A string (the selected or entered value).

---

CountrySingleForm (COUNTRY_SINGLE)

Country picker for selecting a single country. Renders a searchable dropdown with country flags and names.

Strapi props:

Prop	Type	Description
filterCountry	array	Restricts the dropdown to only these country codes (e.g., ["de", "at", "ch"]). When empty, all countries are shown.
locale	string	Language for country names (e.g., en, de)
placeholder	string	Placeholder text

Stored value: A country code string (e.g., de).

---

CountryMultiForm (COUNTRY_MULTI)

Country picker for selecting multiple countries. Same UI as CountrySingleForm but allows adding multiple selections, displayed as tags/chips.

Strapi props:

Prop	Type	Description
filterCountry	array	Restricts available countries to these codes
locale	string	Language for country names

Stored value: An array of country code strings.

See also

• Question Types Reference – Strapi-side specs for RADIO, CHECKBOX, BOOLEAN, and other selection types
• Add Question Types – choosing the right selection type for your use case
• State Management – how selection answers are tracked and used in rules