Input Components

These components handle text entry, numeric input, and structured data collection. They are provided by the qnr-framework core and render inside a Centered Screen layout.

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

---

AddressForm (ADDRESS)

Autocomplete address input with fields for street, house number, postcode, city, and optional additional information.

The app extends this component with Google Maps Places API integration, providing real-time address suggestions as the user types. When a suggestion is selected, all fields are auto-populated.

Strapi props:

Prop	Type	Description
placeholders	object	Custom placeholder text for each field: street, houseNumber, postcode, city, additionalInformation
manualAddressEntryTexts	object	Text overrides for the manual entry toggle and labels when the user switches away from autocomplete
countryCode	string	Fixed country code for address lookup (e.g., de for Germany)
dynamicCountryCode	string	Question ID whose answer provides the country code at runtime

Stored value: An object with street, houseNumber, postcode, city, country, and optionally additionalInformation.

---

InputForm (INPUT)

Single-line text input. The most basic input component, used for free-text fields like employer name, policy number, or any short string.

Strapi props:

Prop	Type	Description
minLength	number	Minimum character count
maxLength	number	Maximum character count
validate	string	Validation pattern identifier (e.g., email)
type	string	HTML input type: text, email, tel, etc. Affects keyboard on mobile.
placeholder	string	Placeholder text

Stored value: A string.

---

NumberInputForm (NUMBER)

Numeric input field. Restricts entry to numbers and provides appropriate mobile keyboard.

Strapi props:

Prop	Type	Description
min	number	Minimum allowed value
max	number	Maximum allowed value
placeholder	string	Placeholder text
validate	string	Validation pattern identifier

Stored value: A number.

---

CurrencyInputForm (CURRENCY)

Money input with locale-aware formatting. Displays the appropriate currency symbol and formats the value as the user types.

Strapi props:

Prop	Type	Description
validate	string	Validation pattern identifier
placeholder	string	Placeholder text

Stored value: A number (the raw currency amount without formatting).

---

DateForm (DATE)

Date picker with separate day, month, and year fields. The app extends the core component with enhanced validation and locale handling.

Strapi props:

Prop	Type	Description
yearRange	object	Required. Contains min and max defining the selectable year range. Can be absolute years (e.g., 1920) or relative expressions.
displayCalendar	boolean	When true, shows a calendar picker instead of separate fields
placeholders	object	Custom placeholder text for day, month, year fields
dayjsLocale	string	Locale for date formatting (e.g., de for German)
firstDayOfWeek	number	Starting day of the week in calendar view (0 = Sunday, 1 = Monday)

Stored value: A date string in ISO format (YYYY-MM-DD).

Caution

The yearRange prop is required. Without it, the year dropdown will not render correctly.

---

NameForm (NAME)

First name and last name in a single step. Renders two input fields side by side. The app extends this with additional validation logic.

Strapi props:

Prop	Type	Description
placeholders	object	Custom placeholder text for firstName and lastName

Stored value: An object with firstName and lastName.

---

PhoneForm (PHONE)

International phone number input with a country code selector. Displays a dropdown of country flags and dial codes, followed by the phone number field.

Strapi props:

Prop	Type	Description
defaultCountry	string	Pre-selected country code (e.g., de)

Stored value: A string containing the full phone number with country code.

---

TextForm (TEXT)

Multi-line textarea for longer free-text responses. Used for descriptions, comments, or any input where more than one line is expected.

Strapi props:

Prop	Type	Description
minLength	number	Minimum character count
maxLength	number	Maximum character count
placeholder	string	Placeholder text
rows	number	Number of visible text rows

Stored value: A string.

---

NumericConversionInputForm (NUMERIC_CONVERSION)

Numeric input with unit conversion support. Lets the user enter a value in one unit and stores it converted to another. For example, entering weight in pounds and storing in kilograms.

Strapi props:

Prop	Type	Description
conversionFactor	number	Multiplier for converting the displayed value to the stored value
unitLabel	string	Label for the displayed unit
placeholder	string	Placeholder text

Stored value: A number (the converted value).

---

SignatureForm (SIGNATURE_UPLOAD)

Digital signature canvas where users draw their signature with a mouse or finger. The app extends this component with SignatureUpload, adding checkbox consent options below the canvas.

Strapi props:

Prop	Type	Description
consentTexts	array	(App extension) List of consent checkbox labels the user must check

Stored value: A base64-encoded image of the signature.

See also

• Question Types Reference – Strapi-side specs for INPUT, DATE, ADDRESS, and other input types
• Add Question Types – choosing the right input type for your use case
• State Management – how input answers are tracked and persisted