> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frankieone.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Form Configuration
> Page customization, CSS styling, form fields, and document upload configuration
## Overview
The Form module's React provider supports extensive customization of each screen's content, styling, and behavior. Configuration is passed as module options when creating the form component.
## ReactFormConfig
The main configuration type for the React form provider:
```typescript theme={null}
type ReactFormConfig = {
name: ReactFormIdsKeys;
mode?: 'individual';
type?: 'ocr' | 'manual' | 'doc_upload';
} & TPageConfig;
```
| Property | Type | Required | Description |
| -------- | ----------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `name` | `ReactFormIdsKeys` | Yes | The starting screen. One of: `'WELCOME'`, `'CONSENT'`, `'DOCUMENT'`, `'REVIEW'`, `'PERSONAL'`, `'LOADING'`, `'RESULT'`, `'RETRY'`, `'DOC_UPLOAD'`, `'START'`, `'REQUIRED_DOCUMENT_UPLOAD'`, `'PARTIAL_DOCUMENT_UPLOAD'`, `'OPTIONAL_DOCUMENT_UPLOAD'`. |
| `mode` | `'individual'` | No | Verification mode. Defaults to `'individual'` for personal KYC. |
| `type` | `'ocr' \| 'manual' \| 'doc_upload'` | No | The verification flow type. `'ocr'` for document capture with auto-extraction, `'manual'` for manual data entry, `'doc_upload'` for file uploads. See [Configuration Types](#configuration-types) for details on which screens are affected. |
Additional page-level properties from [TPageConfig](#page-configuration-types) can be included to customize individual screens.
***
## Configuration Types
The `type` option determines the overall verification flow and primarily affects the **Document Selection**, **Personal Details**, **Review**, and **Retry** screens. Static screens (Welcome, Consent, Start) and progress screens (Loading, Result) are not affected by `type`. Doc upload screens are only shown when `type` is `'doc_upload'`.
### OCR Type
Used to display and review data that was automatically extracted by the [IDV](/docs/sdk-reference/idv-module) or [OCR](/docs/sdk-reference/ocr-module) modules. In a typical OCR flow, the IDV flow handles document capture, and the form module is used to present the extracted data on the Review screen for user confirmation.
**Screens affected:**
* **Review** - Displays OCR-extracted data for user review and submission
* **Document Selection** - Shows document type selection. Useful for specifying document type before mounting the OCR module. Unlike manual mode, OCR mode does not show manual input fields after selection.
```javascript theme={null}
// OCR capture is handled by the IDV flow
const idv = sdk.flow('idv');
// The form module is used for the review screen
const review = sdk.component('form', {
name: 'REVIEW',
mode: 'individual',
type: 'ocr'
});
```
### Manual Type
For manual data entry flows. Users select their document type and manually enter their details.
**Screens affected:**
* **Document Selection** - Shows `numberOfIDs` and document options with `cta` button. After selection, displays manual input fields for the selected document.
* **Personal Details** - Shown for manual data entry with [country-specific field configurations](#country-specific-field-configuration)
* **Review** - Displays manually entered data with `verify`, `hiddenForms`, and `readOnlyForms` options
* **Retry** - Allows re-entry of data that failed verification
```javascript theme={null}
const welcome = sdk.component('form', {
name: 'WELCOME',
mode: 'individual',
type: 'manual'
});
```
### Doc Upload Type
For supporting document file upload flows. Requires [document upload configuration](#document-upload-configuration) in the recipe.
**Screens affected:**
* **Required/Partial/Optional Document Upload** - These screens are only shown in this type
* **Review** - Displays document upload summary
* **Personal Details** - Not shown
```javascript theme={null}
const welcome = sdk.component('form', {
name: 'WELCOME',
mode: 'individual',
type: 'doc_upload'
});
```
***
## Page Configuration Types
The Form module uses four page configuration types depending on the screen:
### IStaticPageConfig
Used by: Welcome, Consent, Start, Document Upload screens
```typescript theme={null}
type IStaticPageConfig = IBasicInfo & {
cta?: ActionContent;
instructions?: ListInfo; // Instruction items
checkbox?: Content; // Consent checkbox content
additionalInstructions?: ListInfo;
}
```
| Property | Type | Description |
| ------------------------ | --------------------------------- | ------------------------------------------------- |
| `cta` | [`ActionContent`](#actioncontent) | Call-to-action button configuration |
| `instructions` | [`ListInfo`](#listinfo) | List of instruction items displayed on the screen |
| `checkbox` | [`Content`](#content-object) | Consent checkbox content (used on Consent screen) |
| `additionalInstructions` | [`ListInfo`](#listinfo) | Additional instruction items |
### IIdCardPageConfig
Used by: Document Selection (manual, ocr, and doc\_upload modes), Retry screens
**OCR mode vs Manual mode:** In OCR mode, Document Selection shows only the document type picker, useful for specifying the document type before mounting the OCR module. In manual mode, Document Selection shows the document type picker followed by manual input fields for the selected document.
```typescript theme={null}
type IIdCardPageConfig = IBasicInfo & {
type: 'ocr' | 'manual' | 'doc_upload';
showPreps?: boolean; // Show document preparation tips
documents: IDocuments[]; // Available document types
numberOfIDs?: number; // Required IDs (manual mode)
cta?: ActionContent; // Action button (manual mode)
}
```
| Property | Type | Description |
| ------------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `type` | `'ocr' \| 'manual' \| 'doc_upload'` | Required. Determines the document selection behavior. See [Configuration Types](#configuration-types). |
| `showPreps` | `boolean` | Show document preparation tips before capture |
| `documents` | [`IDocuments[]`](#idocuments) | Available document types for selection. Each entry configures a document type with optional country-specific field overrides. |
| `numberOfIDs` | `number` | Number of required identity documents (manual mode only) |
| `cta` | [`ActionContent`](#actioncontent) | Action button (manual mode only) |
### IProgressPageConfig
Used by: Loading, Result screens
```typescript theme={null}
type IProgressPageConfig = {
name: string;
title?: Content;
descriptions?: Content[];
style?: Styles;
logo?: { src: string };
icon?: string;
spinnerSrc?: string;
state?: keyof RESULT_STATE; // Result only
creditHeaderIssueTitle?: { label, style }; // Result only
creditHeaderIssueDescriptions?: { label }[]; // Result only
cta?: ActionContent; // Result only
resultImage?: { // Result only
src: string;
width?: string | number;
height?: string | number;
};
}
```
| Property | Type | Description |
| ------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | `string` | Screen identifier |
| `title` | [`Content`](#content-object) | Screen title |
| `descriptions` | [`Content[]`](#content-object) | Description items |
| `style` | `Styles` | Custom [CSS styles](#css-styling) |
| `logo` | `{ src: string }` | Logo image URL |
| `icon` | `string` | Icon to display |
| `spinnerSrc` | `string` | Custom image URL shown in place of the built-in animated spinner while the Loading screen (or a stateless Result/Loading render) is active. Ignored once a `state` is set, since the per-state icon (or `resultImage`) takes priority. |
| `state` | `keyof RESULT_STATE` | Result screen state. One of: `'SUCCESS'`, `'FAIL'`, `'PENDING'`, `'PARTIAL'`, `'UPLOAD_SUCCESS'`, `'UPLOAD_FAIL'`, `'PROVIDER_ERROR'`, `'TIMEOUT'`. Result screen only. |
| `creditHeaderIssueTitle` | `{ label, style }` | Credit issue header title. Result screen only. |
| `creditHeaderIssueDescriptions` | `{ label }[]` | Credit issue descriptions. Result screen only. |
| `cta` | [`ActionContent`](#actioncontent) | Call-to-action button. Result screen only. |
| `resultImage` | `{ src: string, width?, height? }` | Custom image shown instead of the built-in per-state icon on the Result screen. Supplements (does not replace) `icon`/`state` — if the image fails to load, the screen automatically falls back to the default icon for the current `state` and emits a `form:result:info` event. Result screen only. |
### IFormPageConfig
Used by: Review, Personal Details, Retry screens
```typescript theme={null}
type IFormPageConfig = {
name: string;
title: Content;
style?: Styles;
logo?: { src: string };
cta?: ActionContent;
descriptions?: Content[];
type?: 'ocr' | 'manual' | 'doc_upload';
// Document fields (Review, Retry) — one entry per document type
documents?: {
type: DocumentTypes;
countries?: CountryConfig;
documentSourceLabel?: string;
}[];
// Personal detail fields (Personal, Retry)
personal?: {
countries?: CountryConfig;
};
// Manual mode options (Review)
verify?: boolean;
customResult?: boolean;
hiddenForms?: string[];
readOnlyForms?: string[];
}
```
| Property | Type | Description |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `name` | `string` | Screen identifier |
| `title` | [`Content`](#content-object) | Screen title (required) |
| `style` | `Styles` | Custom [CSS styles](#css-styling) |
| `logo` | `{ src: string }` | Logo image URL |
| `cta` | [`ActionContent`](#actioncontent) | Call-to-action button |
| `descriptions` | [`Content[]`](#content-object) | Description items |
| `type` | `'ocr' \| 'manual' \| 'doc_upload'` | Verification flow type. See [Configuration Types](#configuration-types). |
| `documents` | `{ type: DocumentTypes, countries?: `[`CountryConfig`](#country-specific-field-configuration)`, documentSourceLabel?: string }[]` | Per-document-type field configuration. Used on Review and Retry screens. `documentSourceLabel` labels each document's section when the Review screen shows more than one scanned document — see [Multi-Document Review](#multi-document-review). |
| `personal` | `{ countries?: `[`CountryConfig`](#country-specific-field-configuration)` }` | Personal detail form fields, configured per country/state. Used on Personal Details and Retry screens. Not affected by configuration type. |
| `verify` | `boolean` | Enable verification on submit. Manual mode Review screen only. |
| `customResult` | `boolean` | Use custom result handling. Manual mode Review screen only. |
| `hiddenForms` | `string[]` | Form section names to hide. Review screen only. |
| `readOnlyForms` | `string[]` | Form section names to make read-only. Review screen only. |
### Multi-Document Review
When more than one document was scanned during the OCR/IDV capture flow (for example, a passport and a driver's licence submitted for the same applicant), the Review screen renders one review section per scanned document instead of a single combined section. If only one document was scanned, the Review screen falls back to the original single-section behavior.
* **Section heading** — each section's heading is controlled by `documentSourceLabel` on the matching entry in `documents` (matched by `type`). If not set, built-in default labels are used for `PASSPORT` (`'From your passport'`) and `DRIVERS_LICENCE` (`"From your driver's licence"`); other document types have no default label unless you set one.
* **Section order** — sections are ordered with the **primary document** first. The primary document is determined by the individual's `extraData.idv_primary_document` value (set during the IDV flow), matched against each scanned document's type. Ordering is a no-op when only one document was scanned or when `idv_primary_document` is not set.
```javascript theme={null}
const review = sdk.component('form', {
name: 'REVIEW',
type: 'ocr',
documents: [
{ type: 'PASSPORT', documentSourceLabel: 'From your passport' },
{ type: 'DRIVERS_LICENCE', documentSourceLabel: "From your driver's licence" }
]
});
```
***
## Content Customization
### Content Object
Most text elements use the `Content` type for customization:
```typescript theme={null}
type Content = {
icon?: string | ReactComponent | null;
label?: string;
shortLabel?: string;
subText?: string;
labelDescriptions?: string[];
style?: Styles;
hidden?: boolean;
image?: string; // For document types only
}
```
| Property | Type | Description |
| ------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `icon` | `string \| ReactComponent \| null` | Icon to display. Can be a string (icon name/URL) or React component. |
| `label` | `string` | Primary text content |
| `shortLabel` | `string` | Shortened version of the label |
| `subText` | `string` | Secondary text displayed below the label. Used for per-item subtext (e.g. document list rows), not the Review screen's page heading — see `labelDescriptions` below. |
| `labelDescriptions` | `string[]` | Array of description lines rendered under the screen's title/heading, one paragraph per string. Currently only wired up on the Review screen's `title` (`config.title.labelDescriptions`), where it replaces a single `subText` string with support for multiple lines. |
| `style` | `Styles` | Custom CSS styles |
| `hidden` | `boolean` | Whether to hide this content element |
| `image` | `string` | Image URL (available for document type content) |
### IBasicInfo
Base configuration shared by all static and card-based screens:
```typescript theme={null}
type IBasicInfo = {
name: string;
mode?: 'individual';
logo?: { src: string };
title?: Content;
subtitle?: Content;
descriptions?: Content[];
style?: Styles;
type?: 'ocr' | 'manual' | 'doc_upload';
// Font configuration
name?: string; // Font family name
url?: string; // Font URL
}
```
| Property | Type | Description |
| -------------- | ----------------------------------- | ------------------------------------------------------------------------ |
| `name` | `string` | Screen identifier |
| `mode` | `'individual'` | Verification mode. Defaults to `'individual'`. |
| `logo` | `{ src: string }` | Logo image URL |
| `title` | [`Content`](#content-object) | Screen title |
| `subtitle` | [`Content`](#content-object) | Screen subtitle |
| `descriptions` | [`Content[]`](#content-object) | Description items |
| `style` | `Styles` | Custom [CSS styles](#css-styling) |
| `type` | `'ocr' \| 'manual' \| 'doc_upload'` | Verification flow type. See [Configuration Types](#configuration-types). |
| `name` (font) | `string` | Font family name (within font configuration) |
| `url` (font) | `string` | Font URL (within font configuration) |
### ActionContent
Used for buttons and call-to-action elements:
```typescript theme={null}
type ActionContent = Content & {
onClick?: () => void;
timeoutRetryMiliseconds?: number;
retryAmount?: number;
retryAttemptString?: string;
maxRetryAttemptedString?: string;
inline?: boolean;
}
```
| Property | Type | Description |
| ------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onClick` | `() => void` | Click handler for the action |
| `timeoutRetryMiliseconds` | `number` | Timeout before retry is enabled |
| `retryAmount` | `number` | Number of retry attempts allowed |
| `retryAttemptString` | `string` | Text shown during retry countdown |
| `maxRetryAttemptedString` | `string` | Text shown when max retries reached |
| `inline` | `boolean` | Default: `false`. Result screen only. When `true`, the CTA button renders inline within the result content (below the title/descriptions) instead of the sticky button pinned to the bottom of the page. |
### ListInfo
Used for instruction lists on static screens:
```typescript theme={null}
type ListInfo = Content[];
```
An array of [`Content`](#content-object) objects. Each item represents an instruction or list entry, rendered with the `ff-instruction-item` and `ff-instruction-icon` CSS classes.
### IDocuments
Configures a document type available for selection on the [Document Selection](#iidcardpageconfig) screen, with optional country and state-specific field overrides.
```typescript theme={null}
type IDocuments = {
type: string;
countries?: CountryConfig;
}
```
| Property | Type | Description |
| ----------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `type` | `string` | Document type identifier. Supported values include `'DRIVERS_LICENCE'`, `'PASSPORT'`, `'NATIONAL_ID'`, `'NATIONAL_HEALTH_ID'`. |
| `countries` | [`CountryConfig`](#country-specific-field-configuration) | Country and state-specific field overrides for this document type. Allows different fields to be shown based on the user's selected country and state. |
***
## CSS Styling
The Form module provides CSS class keys for styling customization through the `style` property on configuration objects.
### CSS Class Keys
| Key | CSS Class | Description |
| ----------------- | --------------------- | ---------------------------- |
| `wrapper` | `ff-wrapper` | Main form wrapper |
| `innerWrapper` | `ff-inner-wrapper` | Inner content wrapper |
| `description` | `ff-description` | Description text container |
| `instructions` | `ff-instructions` | Instructions list container |
| `documents` | `ff-documents` | Document list container |
| `checkbox` | `ff-checkbox` | Checkbox container |
| `label` | `ff-label` | Label text elements |
| `title` | `ff-title` | Title text elements |
| `subtitle` | `ff-subtitle` | Subtitle text elements |
| `button` | `ff-button` | Primary button |
| `disabledButton` | `ff-disabled-button` | Disabled button state |
| `cancelButton` | `ff-cancel-button` | Cancel/back button |
| `checkboxItem` | `ff-checkbox-item` | Individual checkbox items |
| `descriptionItem` | `ff-description-item` | Individual description items |
| `instructionItem` | `ff-instruction-item` | Individual instruction items |
| `instructionIcon` | `ff-instruction-icon` | Instruction item icons |
| `checkboxInput` | `ff-checkbox-input` | Checkbox input elements |
| `documentItem` | `ff-document-item` | Individual document items |
| `font` | `font` | Font configuration |
| `formWrapper` | `ff-form-wrapper` | Form fields wrapper |
| `formField` | `ff-form-field` | Individual form fields |
| `progressWrapper` | `ff-progress-wrapper` | Progress indicator wrapper |
| `progressItem` | `ff-progress-item` | Individual progress items |
| `loading` | `ff-loading` | Loading indicator |
| `noteContainer` | `ff-note-container` | Note/info box container |
| `noteTitle` | `ff-note-title` | Note title |
| `noteDescription` | `ff-note-description` | Note description text |
| `editIcon` | `ff-edit-button` | Edit icon/button |
| `logo` | `ff-logo` | Logo element |
**Example:**
```javascript theme={null}
const formComponent = sdk.component('form', {
name: 'WELCOME',
mode: 'individual',
type: 'manual',
style: {
'ff-title': {
color: '#1a1a1a',
fontSize: '28px',
fontWeight: 700
},
'ff-button': {
backgroundColor: '#4F46E5',
borderRadius: '8px'
},
'ff-wrapper': {
padding: '24px',
maxWidth: '600px',
margin: '0 auto'
},
font: {
name: 'Inter',
url: 'https://fonts.googleapis.com/css2?family=Inter'
}
}
});
```
***
## Form Fields
Form-based screens (Review, Personal Details, Retry) use configurable form fields.
### Field Types
| Type | Description |
| ---------------- | ------------------------------- |
| `input` | Standard text input |
| `label` | Read-only label display |
| `number` | Numeric input |
| `date` | Date picker |
| `select` | Dropdown select |
| `multiselect` | Multi-option select |
| `textarea` | Multi-line text area |
| `checkbox` | Checkbox |
| `radio` | Radio button group |
| `contact-number` | Contact number with formatting |
| `address` | Address input with autocomplete |
| `phone` | Phone number with country code |
| `hidden` | Hidden field |
### FormField Type
```typescript theme={null}
type FormField = {
name: string; // Field identifier
fieldType: InputConfigType; // Field type (see table above)
dataType?: FormFieldDataType; // Data category
hide?: boolean; // Hide this field
style?: Styles; // Custom CSS styles
showToggle?: boolean; // Show toggle control
image?: string; // Field image/icon
title?: Content; // Field title/label
helperText?: string; // Helper text below field
disabledVisually?: boolean; // Visual disabled state (input only)
// + validation rules
// + field-type-specific props
}
```
| Property | Type | Description |
| ------------------ | --------------------------------- | --------------------------------------------------------- |
| `name` | `string` | Field identifier used for data binding |
| `fieldType` | `InputConfigType` | Field type. See [Field Types](#field-types). |
| `dataType` | `FormFieldDataType` | Data category. See [Field Data Types](#field-data-types). |
| `hide` | `boolean` | Hide this field from the form |
| `style` | `Styles` | Custom [CSS styles](#css-styling) |
| `showToggle` | `boolean` | Show a toggle control for this field |
| `image` | `string` | Field image or icon URL |
| `title` | [`Content`](#content-object) | Field title/label |
| `helperText` | `string` | Helper text displayed below the field |
| `disabledVisually` | `boolean` | Visual disabled state (input fields only) |
| `rules` | [`FieldRules`](#validation-rules) | Validation rules for the field |
### Field-Type-Specific Properties
In addition to the common `FormField` properties above, each `fieldType` supports its own specific properties.
#### `input` / `number` / `textarea` / `hidden`
| Property | Type | Description |
| ------------- | ------------------ | ------------------------------------------------------------------------------------------------------ |
| `placeholder` | `string` | Placeholder text shown when the field is empty |
| `type` | `string` | HTML input type: `'email'`, `'password'`, `'tel'`, `'text'`, `'url'`, `'search'`, `'date'`, `'number'` |
| `maxLength` | `number` | Maximum character length |
| `minLength` | `number` | Minimum character length |
| `min` | `string \| number` | Minimum value (for number inputs) |
| `max` | `string \| number` | Maximum value (for number inputs) |
| `pattern` | `string` | Regex pattern for validation |
#### `date`
Date fields support a `calendarConfig` property that controls the calendar system, locale, and age validation.
| Property | Type | Description |
| ---------------- | -------- | ---------------------------------- |
| `calendarConfig` | `object` | Calendar configuration (see below) |
**`calendarConfig` properties:**
| Property | Type | Default | Description |
| ------------- | -------- | ------------- | -------------------------------------------------------------------------------- |
| `type` | `string` | `'gregorian'` | Calendar system to use. Supported values: `'gregorian'`, `'nepali'`. |
| `locale` | `string` | `'en'` | Calendar locale. Supported values: `'en'`, `'np'`. |
| `day` | `object` | — | Day field config: `{ hide?: boolean, placeholder?: string }` |
| `month` | `object` | — | Month field config: `{ hide?: boolean, placeholder?: string }` |
| `year` | `object` | — | Year field config: `{ placeholder?: string }` |
| `age` | `object` | — | Age validation constraints |
| `age.min` | `number` | — | Minimum allowed age |
| `age.max` | `number` | — | Maximum allowed age |
| `age.message` | `string` | — | Validation message when age is outside the allowed range |
| `dateRange` | `object` | — | Date range constraints: `{ min?: { value, message }, max?: { value, message } }` |
```javascript theme={null}
{
fieldType: 'date',
name: 'dateOfBirth',
label: 'Date of Birth',
calendarConfig: {
type: 'gregorian',
locale: 'en',
age: {
min: 18,
max: 85,
message: 'Age must be between 18 and 85'
}
}
}
```
#### `select` / `multiselect`
| Property | Type | Description |
| -------------- | ----------------------------------------- | ----------------------------------------------------------------------------------------------- |
| `options` | `Array<{ label: string, value: string }>` | **Required.** List of selectable options. Each option has a `label` (display text) and `value`. |
| `placeholder` | `string` | Placeholder text when no option is selected |
| `autocomplete` | `boolean` | Enable type-ahead search within options |
| `emptyText` | `string` | Text shown when no options match a search. Default: `'No record'` |
| `clearable` | `boolean` | Allow clearing the selected value |
**Matching and auto-select behavior when `autocomplete: true`:**
* **Matching** — as the user types, options are filtered to those whose `label` **or** `value` starts with the typed text (case-insensitive). Matching against `value` lets you use short codes as options (e.g. state codes like `NSW`) so users can filter by typing the code even though the displayed label is the full name (e.g. "New South Wales").
* **Select on blur** — when the field loses focus, if the typed text is an **exact** match (case-insensitive) to an option's `value`, that option is automatically selected and the input is updated to show its `label`. Partial/prefix matches are not auto-selected on blur — only an exact `value` match triggers this.
#### `address`
| Property | Type | Description |
| ----------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `placeholder` | `string` | Placeholder text for the autocomplete input |
| `manualFieldConfig` | `FormField[]` | **Required.** Array of `FormField` objects defining the manual address entry fields (country, unit number, street, suburb, state, postal code). When customizing, you must override **all** fields — not just individual ones. |
| `isManual` | `boolean` | Default: `false`. When `true`, shows only the manual entry fields (skips autocomplete). |
| `actionLabel` | `string` | Label for the manual entry toggle link. Default: `'Enter address manually'` |
| `acceptedCountries` | `string[]` | Restrict address autocomplete to specific countries (ISO 3166-1 alpha-2 codes) |
| `addressSearchPosition` | `number` | Index into the **visible** manual fields at which the "Enter address manually" / address-search link is inserted. Default: end of the list (after all visible manual fields). The value is clamped to `[0, visibleFields.length]`. |
**Hidden `streetNumber`/`streetName` fields and auto-hide of `streetAddress`**
The default `manualFieldConfig` for the address field type includes two additional fields, hidden by default, alongside the single free-text `streetAddress` field: `address.streetNumber` (label "Street Number") and `address.streetName` (label "Street Name"). They let you split the street line into two inputs instead of one.
If you override `manualFieldConfig` and set `hide: false` on **either** `address.streetNumber` or `address.streetName`, the `address.streetAddress` field is automatically force-hidden — you don't need to hide it yourself, and the three fields are not intended to be shown together.
#### `phone`
| Property | Type | Description |
| ------------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| `placeholder` | `{ cc: string, phoneNumber: string }` | **Required.** Placeholder text for the country code and phone number inputs. |
| `options` | `Array<{ label: string, value: string }>` | **Required.** Country code options. Example: `[{ label: 'AU +61', value: '+61' }, { label: 'NZ +64', value: '+64' }]` |
#### `checkbox` / `radio`
| Property | Type | Description |
| --------- | ----------------------------------------- | ----------------------------- |
| `options` | `Array<{ label: string, value: string }>` | List of options for selection |
#### `contact-number`
| Property | Type | Description |
| ------------- | -------- | --------------------------------------------- |
| `placeholder` | `string` | Placeholder text for the contact number input |
#### `label`
The `label` fieldType renders static display text. It has no additional field-type-specific properties beyond the common `FormField` properties.
### Field Data Types
| DataType | Description |
| ------------------ | --------------------------- |
| `phone` | Phone number data |
| `email` | Email address data |
| `individual_extra` | Extra individual-level data |
| `document_extra` | Extra document-level data |
| `previous_addr` | Previous address |
| `current_addr` | Current address |
| `text` | Generic text |
| `number` | Numeric data |
### Validation Rules
Fields support validation through the `rules` property:
```typescript theme={null}
type FieldRules = {
rules?: {
required?: string | { value: boolean; message: string };
min?: { value: number; message: string };
max?: { value: number; message: string };
minLength?: { value: number; message: string };
maxLength?: { value: number; message: string };
pattern?: { value: string; message: string };
validate?: (value) => string | boolean;
}
}
```
***
## Default Screen Configurations
The form module provides built-in default configurations for each screen. When you pass custom configuration, your values are **merged** with the defaults — you only need to specify the properties you want to override. Properties not included in your configuration retain their defaults.
Configuration overrides are **shallow-merged** at each level. If you override a specific country or state key (e.g., `AUS.NSW`), only that key is replaced — all other country/state keys remain with their defaults. This means overriding just one country/state will leave all others using the built-in default configuration, which may produce unexpected behavior if the defaults don't match your requirements. To ensure consistency, override **all** country/state keys you intend to support.
### Welcome
```javascript theme={null}
{
name: 'WELCOME',
mode: 'individual',
type: 'ocr',
title: { label: "Let's verify your identity" },
descriptions: [
{
label: "We need to collect some personal information to verify your identity. It's important you enter your details as accurately as possible."
}
],
instructions: {
label: 'You will need',
content: [
{ label: "An ID on you (this could be a driver's licence, passport or Medicare card)" },
{ label: 'Grant access permission on the camera of your phone so we can capture your ID' },
{ label: 'You must be an Australian citizen, permanent resident or Visa holder.' }
]
},
cta: { label: 'Start identity verification' }
}
```
```javascript theme={null}
{
name: 'WELCOME',
mode: 'individual',
type: 'manual',
numberOfIDs: 1,
title: { label: "Let's verify your identity" },
descriptions: [
{
label: 'We need to collect some personal information to verify your identity. All fields must be filled and it is important you enter your details accurately.'
}
],
instructions: {
label: 'You will need',
content: [
{ label: 'A few mins to complete this application' },
{ label: "An ID on you (this could be a driver's licence, passport or Medicare card)" },
{ label: 'You must be over 18 years of age' },
{ label: 'You must be an Australian citizen, permanent resident or Visa holder.' }
]
},
cta: { label: 'Start identity verification' }
}
```
```javascript theme={null}
// Doc upload welcome is dynamically generated from the recipe's docUpload config.
// The requested/partial/optional documents are listed as instructions.
{
name: 'WELCOME',
mode: 'individual',
type: 'doc_upload',
title: { label: 'Document request' },
descriptions: [
{
label: 'The following documents are required as part of our verification process. Please ensure you have these documents on hand:'
}
],
instructions: {
label: 'Requested documents',
content: [/* generated from requestedDocuments in recipe */]
},
additionalInstructions: [/* generated from partialDocuments and optionalDocuments in recipe */],
cta: { label: 'Next' }
}
```
### Consent
```javascript theme={null}
{
name: 'CONSENT',
mode: 'individual',
type: 'manual',
title: { label: 'Your consent matters' },
descriptions: [
{
label: "Your personal information being collected and used in accordance with [Company]'s Privacy Policy."
},
{
label: 'In addition, for the purposes of verifying your identity, you consent to: a) the verification of my personal information with credit bureau header files (for verification only); b) against records held by official document issues or official record holders via third party systems; and c) verification agent(s) acting as a nominated intermediary in accordance with Australian Privacy Principles.'
},
{
label: 'You consent to the use by third parties of the results of any verification checks on my identity for the purposes of monitoring and improving their verification services.'
}
],
checkbox: {
content: [
{ label: 'I have read and agree the above disclosure' }
]
},
cta: { label: 'Continue' }
}
```
### Start
```javascript theme={null}
{
name: 'START',
mode: 'individual',
type: 'manual',
cta: { label: 'Get Started' }
}
```
### Document Selection (Manual)
```javascript theme={null}
{
name: 'DOCUMENT',
mode: 'individual',
type: 'manual',
numberOfIDs: 1,
title: { label: 'Select your first ID' },
subtitle: { label: 'Your ID must be valid and not expired' },
descriptions: [
{ label: 'We need one form of ID document to verify your identity.' }
],
documents: [
{
type: 'DRIVERS_LICENCE',
label: "Driver's licence",
subtitle: '(recommended)',
countries: {
default: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: { type: 'gregory', locale: 'en' }
}
]
}
},
AUS: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 6, message: 'Licence number must be at least 6 characters' },
maxLength: { value: 8, message: 'Licence number must not exceed 8 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 10, message: 'Card number must be at least 10 digits' },
maxLength: { value: 10, message: 'Card number must not exceed 10 digits' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: { type: 'gregory', locale: 'en' }
}
]
},
NSW: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 6, message: 'Licence number must be at least 6 characters' },
maxLength: { value: 8, message: 'Licence number must not exceed 8 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
helperText: 'You will find your Card Number on the front of your card, in the top right corner above your photo.',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 10, message: 'Card number must be at least 10 digits' },
maxLength: { value: 10, message: 'Card number must not exceed 10 digits' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
},
ACT: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 1, message: 'Licence number must be at least 1 character' },
maxLength: { value: 10, message: 'Licence number must not exceed 10 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 10, message: 'Card number must be at least 10 digits' },
maxLength: { value: 10, message: 'Card number must not exceed 10 digits' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
},
VIC: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 1, message: 'Licence number must be at least 1 character' },
maxLength: { value: 10, message: 'Licence number must not exceed 10 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. P1234567',
helperText: 'You will find your Card Number on the back of your card, either in the top right corner or middle right.',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 8, message: 'Card number must be at least 8 characters' },
maxLength: { value: 8, message: 'Card number must not exceed 8 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
},
QLD: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 8, message: 'Licence number must be at least 8 characters' },
maxLength: { value: 9, message: 'Licence number must not exceed 9 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
helperText: 'You will find your Card Number on the front of your card, in the bottom middle, or the back of your card, on the bottom right side.',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 10, message: 'Card number must be at least 10 digits' },
maxLength: { value: 10, message: 'Card number must not exceed 10 digits' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
},
SA: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 6, message: 'Licence number must be at least 6 characters' },
maxLength: { value: 6, message: 'Licence number must not exceed 6 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
helperText: 'You will find your Card Number on the back of your card, in the top right corner.',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 9, message: 'Card number must be at least 9 characters' },
maxLength: { value: 9, message: 'Card number must not exceed 9 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
},
TAS: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 6, message: 'Licence number must be at least 6 characters' },
maxLength: { value: 8, message: 'Licence number must not exceed 8 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
helperText: 'You will find your Card Number on the back of your card, in the top right corner.',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 9, message: 'Card number must be at least 9 characters' },
maxLength: { value: 9, message: 'Card number must not exceed 9 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
},
NT: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 1, message: 'Licence number must be at least 1 character' },
maxLength: { value: 10, message: 'Licence number must not exceed 10 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
helperText: 'The card number is located on the back of your card, either in the bottom left corner or bottom middle.',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 6, message: 'Card number must be at least 6 digits' },
maxLength: { value: 8, message: 'Card number must not exceed 8 digits' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
},
WA: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 7, message: 'Licence number must be at least 7 characters' },
maxLength: { value: 7, message: 'Licence number must not exceed 7 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
helperText: 'You will find your Card Number on the back of your card, in the middle of the right side.',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 8, message: 'Card number must be at least 8 characters' },
maxLength: { value: 10, message: 'Card number must not exceed 10 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
}
},
NZL: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number',
rules: {
required: { value: true, message: 'Please enter your licence number' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'input', dataType: 'number', name: 'extraData.licence_version',
label: 'Version Number', placeholder: 'e.g. 123',
rules: {
required: { value: true, message: 'Please enter your version number' },
minLength: { value: 3, message: 'Version number must be at least 3 characters' },
maxLength: { value: 3, message: 'Version number must not exceed 3 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: { type: 'gregory', locale: 'en' }
}
]
}
}
}
},
{
type: 'PASSPORT',
label: 'Passport',
countries: {
default: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: 'Passport Issuing Country',
options: [
// All ISO 3166-1 alpha-3 countries, sorted alphabetically by label.
// Contains ~250 entries in the format { label: 'Country Name', value: 'ALPHA3_CODE' }.
// First few: { label: 'Afghanistan', value: 'AFG' }, { label: 'Albania', value: 'ALB' }, ...
// Last: { label: 'Zambia', value: 'ZMB' }, { label: 'Zimbabwe', value: 'ZWE' }
],
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Passport Number', placeholder: 'e.g. A1234567890',
rules: { required: { value: true, message: 'Please enter your passport number' } }
}
]
}
},
AUS: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: 'Passport Issuing Country',
options: [/* all ISO 3166-1 alpha-3 countries, sorted alphabetically */],
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Passport Number', placeholder: 'e.g. A1234567890',
rules: {
required: { value: true, message: 'Please enter your passport number' },
minLength: { value: 8, message: 'Passport number must be at least 8 characters' },
maxLength: { value: 9, message: 'Passport number must not exceed 9 characters' }
}
}
]
}
},
NZL: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: 'Passport Issuing Country',
options: [/* all ISO 3166-1 alpha-3 countries, sorted alphabetically */],
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Passport Number', placeholder: 'e.g. A1234567890',
rules: {
required: { value: true, message: 'Please enter your passport number' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Date of Expiry',
rules: {
required: { value: true, message: "Please enter your passport's expiry date" }
},
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' },
dateRange: {
min: { value: 'now' },
max: { value: '+10 years' }
},
message: "Please enter your passport's expiry date"
}
}
]
}
},
IND: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: 'Passport Issuing Country',
options: [/* all ISO 3166-1 alpha-3 countries, sorted alphabetically */],
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Passport Number', placeholder: 'e.g. A1234567890',
rules: {
required: { value: true, message: 'Please enter your passport number' }
}
},
{
fieldType: 'input', name: 'extraData.document_number', dataType: 'document_extra',
label: 'File Number', placeholder: 'e.g. ABCD12345678',
rules: {
required: { value: true, message: 'Please enter your File Number' }
}
}
]
}
}
}
},
{
type: 'NATIONAL_HEALTH_ID',
label: 'Medicare card',
countries: {
default: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'idSubType',
label: 'Medicare Card Colour',
options: [
{ label: 'Green', value: 'G' },
{ label: 'Blue', value: 'B' },
{ label: 'Yellow', value: 'Y' }
],
placeholder: 'Select Medicare Card Colour',
rules: { required: { value: true, message: 'Please select your Medicare card colour' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Medicare Card Number',
rules: {
required: { value: true, message: 'Please enter your Medicare card number' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' },
minLength: { value: 10, message: 'Medicare card number must be at least 10 digits' },
maxLength: { value: 10, message: 'Medicare card number must be not exceed 10 digits' }
}
},
{
fieldType: 'input', dataType: 'document_extra', name: 'extraData.reference',
label: 'Position on Card',
rules: {
required: { value: true, message: 'Please enter your position on card' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' },
maxLength: { value: 1, message: 'Position on card must not exceed 1 digit' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Date of Expiry',
rules: { required: { value: true, message: 'Please enter your Medicare expiry date' } },
calendarConfig: {
type: 'gregory', locale: 'en',
message: 'Please enter valid Medicare expiry date'
}
},
{
fieldType: 'select', dataType: 'text', name: 'middleNameDisplayType',
label: 'How is middle name displayed on the card?',
options: [
{ label: 'No Middle Name', value: 'No middle name' },
{ label: 'Initial Only', value: 'Initial only' },
{ label: 'Full Middle Name', value: 'Full middle name' }
]
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.display_name_line1',
label: 'Name displayed on card',
disabledVisually: true
},
{
fieldType: 'hidden', dataType: 'text', name: 'extraData.display_middle_name',
label: 'Middle name displayed on card'
}
]
}
}
}
}
],
cta: { label: 'Next' }
}
```
### Personal Details
```javascript theme={null}
{
name: 'PERSONAL',
title: { label: 'Personal details' },
descriptions: [
{
label: 'The details you provide below will be used to verify your identity – make sure they match your ID documents.'
}
],
personal: {
countries: {
default: {
default: {
fields: [
{
fieldType: 'input', dataType: 'text', name: 'givenName',
hide: false, label: 'Given Name',
rules: {
required: { value: true, message: 'Please enter your given name' },
pattern: {
value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$",
message: 'Please enter alphabetic characters with apostrophe only'
}
}
},
{
fieldType: 'input', dataType: 'text', name: 'middleName',
hide: false, label: 'Middle Name(s)',
showToggle: true,
rules: {
required: { value: true, message: 'Please enter your middle name' },
pattern: {
value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$",
message: 'Please enter alphabetic characters with apostrophe only'
}
},
toggleConfig: {
label: 'Do you have any Middle Names?',
rules: {
required: { value: true, message: 'Please let us know if you have any middle names' }
}
}
},
{
fieldType: 'input', dataType: 'text', name: 'familyName',
hide: false, label: 'Family Name',
rules: {
required: { value: true, message: 'Please enter your family name' },
pattern: {
value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$",
message: 'Please enter alphabetic characters with apostrophe only'
}
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.otherName',
hide: true, label: 'Other Name(s)',
showToggle: true,
rules: {
pattern: {
value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$",
message: 'Please enter alphabetic characters with apostrophe only'
}
},
toggleConfig: {
label: 'Do you have any Other Names?'
}
},
{
fieldType: 'phone', dataType: 'number', name: 'extraData.phone',
hide: true, label: 'Phone Number',
options: [
{ label: 'AU +61', value: '+61' },
{ label: 'NZ +64', value: '+64' }
],
placeholder: { cc: 'Code', phoneNumber: 'e.g. 0400 000 000' },
rules: {
required: { value: true, message: 'Please enter the phone number' },
minLength: { value: 10, message: 'Phone number must be at least 10 digits' },
maxLength: { value: 10, message: 'Phone number must not exceed 10 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.email',
hide: true, label: 'Email',
rules: {
required: { value: true, message: 'Please enter the email' },
pattern: {
value: '^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$',
message: 'Please enter a valid email address'
}
}
},
{
fieldType: 'date', dataType: 'text', name: 'dateOfBirth',
hide: false, label: 'Date of Birth',
rules: { required: { value: true, message: 'Please enter your date of birth' } },
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' },
month: { placeholder: 'Month' },
year: { placeholder: 'Year' },
message: 'Please enter your date of birth'
}
},
{
fieldType: 'address', dataType: 'current_addr', name: 'address.fullAddress',
hide: false, label: 'Residential Address',
placeholder: 'Type in your address',
helperText: 'Cannot be a PO Box',
rules: { required: { value: true, message: 'Please enter your residential address' } },
manualFieldConfig: [
{
fieldType: 'select', dataType: 'text', name: 'address.country',
hide: false, label: 'Country',
options: [/* all ISO 3166-1 alpha-3 countries, sorted alphabetically */],
rules: { required: { value: true, message: 'Please select your country' } }
},
{
fieldType: 'input', dataType: 'text', name: 'address.unitNumber',
hide: false, label: 'Unit Number (optional)'
},
{
fieldType: 'input', dataType: 'text', name: 'address.streetAddress',
hide: false, label: 'Street Address',
rules: { required: { value: true, message: 'Please enter your street address' } }
},
{
fieldType: 'input', dataType: 'text', name: 'address.town',
hide: false, label: 'Suburb / Town',
rules: { required: { value: true, message: 'Please enter your suburb/town.' } }
},
{
fieldType: 'select', dataType: 'text', name: 'address.state',
hide: false, label: 'State',
placeholder: 'Select Your State',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'address.postalCode',
hide: false, label: 'Postcode',
rules: {
required: { value: true, message: 'Please enter your postal code' },
minLength: { value: 0, message: '' },
maxLength: { value: 100, message: '' }
}
}
]
}
]
}
},
AUS: {
default: {
fields: [
{
fieldType: 'input', dataType: 'text', name: 'givenName',
hide: false, label: 'Given Name',
rules: {
required: { value: true, message: 'Please enter your given name' },
pattern: { value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$", message: 'Please enter alphabetic characters with apostrophe only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'middleName',
hide: false, label: 'Middle Name(s)',
showToggle: true,
rules: {
required: { value: true, message: 'Please enter your middle name' },
pattern: { value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$", message: 'Please enter alphabetic characters with apostrophe only' }
},
toggleConfig: {
label: 'Do you have any Middle Names?',
rules: { required: { value: true, message: 'Please let us know if you have any middle names' } }
}
},
{
fieldType: 'input', dataType: 'text', name: 'familyName',
hide: false, label: 'Family Name',
rules: {
required: { value: true, message: 'Please enter your family name' },
pattern: { value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$", message: 'Please enter alphabetic characters with apostrophe only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.otherName',
hide: true, label: 'Other Name(s)',
showToggle: true,
rules: { pattern: { value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$", message: 'Please enter alphabetic characters with apostrophe only' } },
toggleConfig: { label: 'Do you have any Other Names?' }
},
{
fieldType: 'phone', dataType: 'number', name: 'extraData.phone',
hide: true, label: 'Phone Number',
options: [{ label: 'AU +61', value: '+61' }, { label: 'NZ +64', value: '+64' }],
placeholder: { cc: 'Code', phoneNumber: 'e.g. 0400 000 000' },
rules: {
required: { value: true, message: 'Please enter the phone number' },
minLength: { value: 10, message: 'Phone number must be at least 10 digits' },
maxLength: { value: 10, message: 'Phone number must not exceed 10 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.email',
hide: true, label: 'Email',
rules: {
required: { value: true, message: 'Please enter the email' },
pattern: { value: '^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$', message: 'Please enter a valid email address' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'dateOfBirth',
hide: false, label: 'Date of Birth',
rules: { required: { value: true, message: 'Please enter your date of birth' } },
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' },
message: 'Please enter your date of birth'
}
},
{
fieldType: 'address', dataType: 'current_addr', name: 'address.fullAddress',
hide: false, label: 'Residential Address',
placeholder: 'Type in your address',
helperText: 'Cannot be a PO Box',
rules: { required: { value: true, message: 'Please enter your residential address' } },
manualFieldConfig: [
{
fieldType: 'select', dataType: 'text', name: 'address.country',
hide: false, label: 'Country',
options: [/* all ISO 3166-1 alpha-3 countries, sorted alphabetically */],
rules: { required: { value: true, message: 'Please select your country' } }
},
{ fieldType: 'input', dataType: 'text', name: 'address.unitNumber', hide: false, label: 'Unit Number (optional)' },
{
fieldType: 'input', dataType: 'text', name: 'address.streetAddress',
hide: false, label: 'Street Address',
rules: { required: { value: true, message: 'Please enter your street address' } }
},
{
fieldType: 'input', dataType: 'text', name: 'address.town',
hide: false, label: 'Suburb / Town',
rules: { required: { value: true, message: 'Please enter your suburb/town.' } }
},
{
fieldType: 'select', dataType: 'text', name: 'address.state',
hide: false, label: 'State', placeholder: 'Select Your State',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'address.postalCode',
hide: false, label: 'Postcode',
rules: {
required: { value: true, message: 'Please enter your postal code' },
minLength: { value: 4, message: 'Postal code must be at least 4 characters' },
maxLength: { value: 4, message: 'Postal code must not exceed 4 characters' }
}
}
]
}
]
}
}
}
},
cta: { label: 'Next' }
}
```
When customizing the address `manualFieldConfig`, you must override **all** fields in `manualFieldConfig`, not just individual ones. This is because the `manualFieldConfig` array is replaced entirely, not merged field-by-field. Additionally, if you have specified `acceptedCountries` on the address field, you will need to define the configuration for each country in the `personal.countries` property.
### Review
```javascript theme={null}
{
name: 'REVIEW',
type: 'ocr',
verify: false,
title: { label: 'Are your details correct?' },
personal: {
countries: {
default: {
default: {
fields: [
{
fieldType: 'input', dataType: 'text', name: 'givenName',
hide: false, label: 'Given Name',
rules: {
required: { value: true, message: 'Please enter your given name' },
pattern: { value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$", message: 'Please enter alphabetic characters with apostrophe only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'middleName',
hide: false, label: 'Middle Name(s)',
rules: {
pattern: { value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$", message: 'Please enter alphabetic characters with apostrophe only' }
},
helperText: 'As displayed on your ID'
},
{
fieldType: 'input', dataType: 'text', name: 'familyName',
hide: false, label: 'Family Name',
rules: {
required: { value: true, message: 'Please enter your family name' },
pattern: { value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$", message: 'Please enter alphabetic characters with apostrophe only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.otherName',
hide: true, label: 'Other Name(s)',
rules: { pattern: { value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$", message: 'Please enter alphabetic characters with apostrophe only' } },
helperText: 'As displayed on your ID'
},
{
fieldType: 'date', dataType: 'text', name: 'dateOfBirth',
hide: false, label: 'Date of Birth',
rules: { required: { value: true, message: 'Please enter your date of birth' } },
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' },
message: 'Please enter your date of birth'
},
standardDate: true, configYear: true
},
{
fieldType: 'address', name: 'address.fullAddress', dataType: 'current_addr',
hide: false, label: 'Residential Address',
placeholder: 'Type in your address',
helperText: 'Cannot be a PO Box',
rules: { required: { value: true, message: 'Please enter your residential address' } },
isManual: true,
manualFieldConfig: [
{
fieldType: 'select', dataType: 'text', name: 'address.country',
hide: false, label: 'Country',
options: [/* all ISO 3166-1 alpha-3 countries, sorted alphabetically */],
rules: {
required: { value: true, message: 'Please select your country' },
pattern: { value: "^(?! )[a-zA-Z0-9 ]+(?
```javascript theme={null}
{
name: 'REVIEW',
type: 'doc_upload',
title: { label: 'Review your documents' },
cta: { label: 'Submit documents' }
}
```
### Loading
The Loading screen has different defaults per mode:
```javascript theme={null}
// OCR mode
{ name: 'LOADING', title: { label: 'Loading...' }, descriptions: [{ label: 'Data extracting...' }] }
// Manual mode
{
name: 'LOADING',
title: { label: 'Verifying your identity' },
descriptions: [
{ label: "Hold tight, this can take a few seconds. Please do not refresh this page or click the 'back' button on your browser." }
]
}
// Doc Upload mode
{
name: 'LOADING',
title: { label: 'Submitting documents' },
descriptions: [{ label: 'Please do not close this tab while your documents are being processed...' }]
}
```
### Result
The Result screen defaults vary by state. The initial state is `PENDING`.
```javascript theme={null}
// Base config
{ name: 'RESULT', state: 'PENDING' }
// Defaults per state (merged based on the state value):
// SUCCESS
{
title: { label: 'Congratulations, your identity has been successfully verified', shortLabel: 'Your identity has been verified' },
creditHeaderIssueTitle: { label: 'Please Note' },
creditHeaderIssueDescriptions: [
{ label: "The details you provided didn't match the records held on file by one or all of the credit reporting agencies we checked (Illion, Equifax and/or Experian)." },
{ label: "Don't worry, this doesn't mark or affect credit history in any way." },
{ label: 'There is nothing you need to do, however if you\'d like more information please feel free to get in touch with our customer service team.' },
{ label: 'You may now safely navigate away from this page.' }
],
cta: { label: 'Done' }
}
// FAIL
{
title: { label: 'Unfortunately we are unable to verify your identity' },
descriptions: [{ label: 'Please contact the customer support team to help you with creating your account.' }],
creditHeaderIssueTitle: { label: 'Please Note' },
creditHeaderIssueDescriptions: [
{ label: "The details you provided didn't match the records held on file by one or all of the credit reporting agencies we checked (Illion, Equifax and/or Experian)." },
{ label: "Don't worry, this doesn't mark or affect credit history in any way. However this could be why we've had trouble verifying your identity." },
{ label: "There is nothing you need to do, however if you'd like more information please feel free to get in touch with our customer service team." },
{ label: 'You may now safely navigate away from this page.' }
],
cta: { label: 'Done' }
}
// PENDING
{
title: { label: 'Thanks, your information has been submitted for verification' },
descriptions: [{ label: "You're all done. We will be in touch once we have your results." }],
creditHeaderIssueTitle: { label: 'Please Note' },
creditHeaderIssueDescriptions: [
{ label: "The details you provided didn't match the records held on file by one or all of the credit reporting agencies we checked (Illion, Equifax and/or Experian)." },
{ label: "Don't worry, this doesn't mark or affect credit history in any way. However this could be why we've had trouble verifying your identity." },
{ label: "There is nothing you need to do, however if you'd like more information please feel free to get in touch with our customer service team." },
{ label: 'You may now safely navigate away from this page.' }
],
cta: { label: 'Done' }
}
// PARTIAL
{
title: { label: 'We are having trouble verifying your identity' },
descriptions: [{ label: "Most of the time it's just a typo, let's check your ID details have been entered correctly." }],
creditHeaderIssueTitle: { label: 'Please Note' },
creditHeaderIssueDescriptions: [
{ label: "The details you provided didn't match the records held on file by one or all of the credit reporting agencies we checked (Illion, Equifax and/or Experian)." },
{ label: "Don't worry, this doesn't mark or affect credit history in any way. However this could be why we've had trouble verifying your identity." },
{ label: "There is nothing you need to do, however if you'd like more information please feel free to get in touch with our customer service team." },
{ label: 'You may now safely navigate away from this page.' }
],
cta: { label: 'Review details' }
}
// UPLOAD_SUCCESS
{
title: { label: 'Thanks, your document has been uploaded' },
descriptions: [{ label: "You're all done, and can close the page." }]
}
// UPLOAD_FAIL
{
title: { label: 'There was an issue uploading your document' },
descriptions: [{ label: 'This could be a technical issue with the upload. Please retry submitting document.' }],
cta: { label: 'Retry submitting documents' }
}
// PROVIDER_ERROR
{
title: { label: 'We are having trouble verifying your identity' },
descriptions: [{ label: 'Please try again a few minutes.' }],
creditHeaderIssueTitle: { label: 'Please Note' },
creditHeaderIssueDescriptions: [
{ label: "The details you provided didn't match the records held on file by one or all of the credit reporting agencies we checked (Illion, Equifax and/or Experian)." },
{ label: "Don't worry, this doesn't mark or affect credit history in any way. However this could be why we've had trouble verifying your identity." },
{ label: "There is nothing you need to do, however if you'd like more information please feel free to get in touch with our customer service team." },
{ label: 'You may now safely navigate away from this page.' }
],
cta: { label: 'Retry' }
}
// TIMEOUT
{
title: { label: 'Your session has timed out' },
descriptions: [
{ label: 'The identity verification process took too long and has timed out. Please close this window and try again.' }
],
cta: { label: 'Done' }
}
```
Unlike `SUCCESS`/`FAIL`/`PARTIAL`/`PROVIDER_ERROR`, the `TIMEOUT` state has no `creditHeaderIssueTitle`/`creditHeaderIssueDescriptions` — it isn't a credit-check-related outcome. The Result screen's `state` must be set explicitly (e.g. by the host application) when a verification attempt has timed out; the form module does not have built-in polling-timeout logic that sets this state automatically.
### Retry
The Retry screen extends the Review config with the Personal Details fields and Document Selection documents. It adds a previous address toggle field.
```javascript theme={null}
{
name: 'RETRY',
title: { label: 'Review personal details' },
descriptions: [{ label: 'We need one form of ID document to verify your identity.' }],
personal: {
countries: {
default: {
default: {
fields: [
{
fieldType: 'input', dataType: 'text', name: 'givenName',
hide: false, label: 'Given Name',
rules: {
required: { value: true, message: 'Please enter your given name' },
pattern: {
value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$",
message: 'Please enter alphabetic characters with apostrophe only'
}
}
},
{
fieldType: 'input', dataType: 'text', name: 'middleName',
hide: false, label: 'Middle Name(s)',
showToggle: true,
rules: {
required: { value: true, message: 'Please enter your middle name' },
pattern: {
value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$",
message: 'Please enter alphabetic characters with apostrophe only'
}
},
toggleConfig: {
label: 'Do you have any Middle Names?',
rules: {
required: { value: true, message: 'Please let us know if you have any middle names' }
}
}
},
{
fieldType: 'input', dataType: 'text', name: 'familyName',
hide: false, label: 'Family Name',
rules: {
required: { value: true, message: 'Please enter your family name' },
pattern: {
value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$",
message: 'Please enter alphabetic characters with apostrophe only'
}
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.otherName',
hide: true, label: 'Other Name(s)',
showToggle: true,
rules: {
pattern: {
value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$",
message: 'Please enter alphabetic characters with apostrophe only'
}
},
toggleConfig: {
label: 'Do you have any Other Names?'
}
},
{
fieldType: 'phone', dataType: 'number', name: 'extraData.phone',
hide: true, label: 'Phone Number',
options: [
{ label: 'AU +61', value: '+61' },
{ label: 'NZ +64', value: '+64' }
],
placeholder: { cc: 'Code', phoneNumber: 'e.g. 0400 000 000' },
rules: {
required: { value: true, message: 'Please enter the phone number' },
minLength: { value: 10, message: 'Phone number must be at least 10 digits' },
maxLength: { value: 10, message: 'Phone number must not exceed 10 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.email',
hide: true, label: 'Email',
rules: {
required: { value: true, message: 'Please enter the email' },
pattern: {
value: '^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$',
message: 'Please enter a valid email address'
}
}
},
{
fieldType: 'date', dataType: 'text', name: 'dateOfBirth',
hide: false, label: 'Date of Birth',
rules: { required: { value: true, message: 'Please enter your date of birth' } },
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' },
month: { placeholder: 'Month' },
year: { placeholder: 'Year' },
message: 'Please enter your date of birth'
}
},
{
fieldType: 'address', dataType: 'current_addr', name: 'address.fullAddress',
hide: false, label: 'Residential Address',
placeholder: 'Type in your address',
helperText: 'Cannot be a PO Box',
rules: { required: { value: true, message: 'Please enter your residential address' } },
manualFieldConfig: [
{
fieldType: 'select', dataType: 'text', name: 'address.country',
hide: false, label: 'Country',
options: [/* all ISO 3166-1 alpha-3 countries, sorted alphabetically */],
rules: { required: { value: true, message: 'Please select your country' } }
},
{
fieldType: 'input', dataType: 'text', name: 'address.unitNumber',
hide: false, label: 'Unit Number (optional)'
},
{
fieldType: 'input', dataType: 'text', name: 'address.streetAddress',
hide: false, label: 'Street Address',
rules: { required: { value: true, message: 'Please enter your street address' } }
},
{
fieldType: 'input', dataType: 'text', name: 'address.town',
hide: false, label: 'Suburb / Town',
rules: { required: { value: true, message: 'Please enter your suburb/town.' } }
},
{
fieldType: 'select', dataType: 'text', name: 'address.state',
hide: false, label: 'State',
placeholder: 'Select Your State',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'address.postalCode',
hide: false, label: 'Postcode',
rules: {
required: { value: true, message: 'Please enter your postal code' },
minLength: { value: 0, message: '' },
maxLength: { value: 100, message: '' }
}
}
]
},
{
fieldType: 'address', dataType: 'previous_addr', name: 'address1.fullAddress',
hide: true, label: 'What was your previous residential address?',
showToggle: true,
title: { label: 'Residential address' },
placeholder: 'Type in your previous address',
rules: { required: { value: true, message: 'Please enter your previous address' } },
toggleConfig: {
label: 'Have you been at your current residential address for less than 6 months?',
rules: { required: { value: true, message: 'Please let us know if you have any previous address' } }
},
manualFieldConfig: [
{ fieldType: 'select', dataType: 'text', name: 'address1.country', hide: false, label: 'Country',
options: [/* all ISO 3166-1 alpha-3 countries, sorted alphabetically */],
rules: { required: { value: true, message: 'Please select your country' } } },
{ fieldType: 'input', dataType: 'text', name: 'address1.unitNumber', hide: false, label: 'Unit Number (optional)' },
{ fieldType: 'input', dataType: 'text', name: 'address1.streetAddress', hide: false, label: 'Street Address',
rules: { required: { value: true, message: 'Please enter your street address' } } },
{ fieldType: 'input', dataType: 'text', name: 'address1.town', hide: false, label: 'Suburb / Town',
rules: { required: { value: true, message: 'Please enter your suburb/town.' } } },
{ fieldType: 'select', dataType: 'text', name: 'address1.state', hide: false, label: 'State',
placeholder: 'Select Your State',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
rules: { required: { value: true, message: 'Please select your state' } } },
{ fieldType: 'input', dataType: 'text', name: 'address1.postalCode', hide: false, label: 'Postcode',
rules: { required: { value: true, message: 'Please enter your postal code' }, minLength: { value: 0, message: '' }, maxLength: { value: 100, message: '' } } }
]
}
]
}
},
AUS: {
default: {
fields: [
{
fieldType: 'input', dataType: 'text', name: 'givenName',
hide: false, label: 'Given Name',
rules: {
required: { value: true, message: 'Please enter your given name' },
pattern: { value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$", message: 'Please enter alphabetic characters with apostrophe only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'middleName',
hide: false, label: 'Middle Name(s)',
showToggle: true,
rules: {
required: { value: true, message: 'Please enter your middle name' },
pattern: { value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$", message: 'Please enter alphabetic characters with apostrophe only' }
},
toggleConfig: {
label: 'Do you have any Middle Names?',
rules: { required: { value: true, message: 'Please let us know if you have any middle names' } }
}
},
{
fieldType: 'input', dataType: 'text', name: 'familyName',
hide: false, label: 'Family Name',
rules: {
required: { value: true, message: 'Please enter your family name' },
pattern: { value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$", message: 'Please enter alphabetic characters with apostrophe only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.otherName',
hide: true, label: 'Other Name(s)',
showToggle: true,
rules: { pattern: { value: "^[a-zA-Z]+(?:[''][a-zA-Z]+)*(?:\\s+[a-zA-Z]+(?:[''][a-zA-Z]+)*)*$", message: 'Please enter alphabetic characters with apostrophe only' } },
toggleConfig: { label: 'Do you have any Other Names?' }
},
{
fieldType: 'phone', dataType: 'number', name: 'extraData.phone',
hide: true, label: 'Phone Number',
options: [{ label: 'AU +61', value: '+61' }, { label: 'NZ +64', value: '+64' }],
placeholder: { cc: 'Code', phoneNumber: 'e.g. 0400 000 000' },
rules: {
required: { value: true, message: 'Please enter the phone number' },
minLength: { value: 10, message: 'Phone number must be at least 10 digits' },
maxLength: { value: 10, message: 'Phone number must not exceed 10 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.email',
hide: true, label: 'Email',
rules: {
required: { value: true, message: 'Please enter the email' },
pattern: { value: '^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4}$', message: 'Please enter a valid email address' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'dateOfBirth',
hide: false, label: 'Date of Birth',
rules: { required: { value: true, message: 'Please enter your date of birth' } },
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' },
message: 'Please enter your date of birth'
}
},
{
fieldType: 'address', dataType: 'current_addr', name: 'address.fullAddress',
hide: false, label: 'Residential Address',
placeholder: 'Type in your address',
helperText: 'Cannot be a PO Box',
rules: { required: { value: true, message: 'Please enter your residential address' } },
manualFieldConfig: [
{
fieldType: 'select', dataType: 'text', name: 'address.country',
hide: false, label: 'Country',
options: [/* all ISO 3166-1 alpha-3 countries, sorted alphabetically */],
rules: { required: { value: true, message: 'Please select your country' } }
},
{ fieldType: 'input', dataType: 'text', name: 'address.unitNumber', hide: false, label: 'Unit Number (optional)' },
{
fieldType: 'input', dataType: 'text', name: 'address.streetAddress',
hide: false, label: 'Street Address',
rules: { required: { value: true, message: 'Please enter your street address' } }
},
{
fieldType: 'input', dataType: 'text', name: 'address.town',
hide: false, label: 'Suburb / Town',
rules: { required: { value: true, message: 'Please enter your suburb/town.' } }
},
{
fieldType: 'select', dataType: 'text', name: 'address.state',
hide: false, label: 'State', placeholder: 'Select Your State',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'address.postalCode',
hide: false, label: 'Postcode',
rules: {
required: { value: true, message: 'Please enter your postal code' },
minLength: { value: 4, message: 'Postal code must be at least 4 characters' },
maxLength: { value: 4, message: 'Postal code must not exceed 4 characters' }
}
}
]
},
{
fieldType: 'address', dataType: 'previous_addr', name: 'address1.fullAddress',
hide: true, label: 'What was your previous residential address?',
showToggle: true,
title: { label: 'Residential address' },
placeholder: 'Type in your previous address',
rules: { required: { value: true, message: 'Please enter your previous address' } },
toggleConfig: {
label: 'Have you been at your current residential address for less than 6 months?',
rules: { required: { value: true, message: 'Please let us know if you have any previous address' } }
},
manualFieldConfig: [
{ fieldType: 'select', dataType: 'text', name: 'address1.country', hide: false, label: 'Country',
options: [/* all ISO 3166-1 alpha-3 countries, sorted alphabetically */],
rules: { required: { value: true, message: 'Please select your country' } } },
{ fieldType: 'input', dataType: 'text', name: 'address1.unitNumber', hide: false, label: 'Unit Number (optional)' },
{ fieldType: 'input', dataType: 'text', name: 'address1.streetAddress', hide: false, label: 'Street Address',
rules: { required: { value: true, message: 'Please enter your street address' } } },
{ fieldType: 'input', dataType: 'text', name: 'address1.town', hide: false, label: 'Suburb / Town',
rules: { required: { value: true, message: 'Please enter your suburb/town.' } } },
{ fieldType: 'select', dataType: 'text', name: 'address1.state', hide: false, label: 'State',
placeholder: 'Select Your State',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
rules: { required: { value: true, message: 'Please select your state' } } },
{ fieldType: 'input', dataType: 'text', name: 'address1.postalCode', hide: false, label: 'Postcode',
rules: { required: { value: true, message: 'Please enter your postal code' }, minLength: { value: 4, message: 'Postal code must be at least 4 characters' }, maxLength: { value: 4, message: 'Postal code must not exceed 4 characters' } } }
]
}
]
}
}
}
},
documents: [
{
type: 'DRIVERS_LICENCE',
label: "Driver's licence",
subtitle: '(recommended)',
countries: {
default: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: { type: 'gregory', locale: 'en' }
}
]
}
},
AUS: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 6, message: 'Licence number must be at least 6 characters' },
maxLength: { value: 8, message: 'Licence number must not exceed 8 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 10, message: 'Card number must be at least 10 digits' },
maxLength: { value: 10, message: 'Card number must not exceed 10 digits' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: { type: 'gregory', locale: 'en' }
}
]
},
NSW: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 6, message: 'Licence number must be at least 6 characters' },
maxLength: { value: 8, message: 'Licence number must not exceed 8 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
helperText: 'You will find your Card Number on the front of your card, in the top right corner above your photo.',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 10, message: 'Card number must be at least 10 digits' },
maxLength: { value: 10, message: 'Card number must not exceed 10 digits' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
},
ACT: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 1, message: 'Licence number must be at least 1 character' },
maxLength: { value: 10, message: 'Licence number must not exceed 10 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 10, message: 'Card number must be at least 10 digits' },
maxLength: { value: 10, message: 'Card number must not exceed 10 digits' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
},
VIC: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 1, message: 'Licence number must be at least 1 character' },
maxLength: { value: 10, message: 'Licence number must not exceed 10 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. P1234567',
helperText: 'You will find your Card Number on the back of your card, either in the top right corner or middle right.',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 8, message: 'Card number must be at least 8 characters' },
maxLength: { value: 8, message: 'Card number must not exceed 8 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
},
QLD: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 8, message: 'Licence number must be at least 8 characters' },
maxLength: { value: 9, message: 'Licence number must not exceed 9 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
helperText: 'You will find your Card Number on the front of your card, in the bottom middle, or the back of your card, on the bottom right side.',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 10, message: 'Card number must be at least 10 digits' },
maxLength: { value: 10, message: 'Card number must not exceed 10 digits' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
},
SA: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 6, message: 'Licence number must be at least 6 characters' },
maxLength: { value: 6, message: 'Licence number must not exceed 6 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
helperText: 'You will find your Card Number on the back of your card, in the top right corner.',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 9, message: 'Card number must be at least 9 characters' },
maxLength: { value: 9, message: 'Card number must not exceed 9 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
},
TAS: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 6, message: 'Licence number must be at least 6 characters' },
maxLength: { value: 8, message: 'Licence number must not exceed 8 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
helperText: 'You will find your Card Number on the back of your card, in the top right corner.',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 9, message: 'Card number must be at least 9 characters' },
maxLength: { value: 9, message: 'Card number must not exceed 9 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
},
NT: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 1, message: 'Licence number must be at least 1 character' },
maxLength: { value: 10, message: 'Licence number must not exceed 10 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
helperText: 'The card number is located on the back of your card, either in the bottom left corner or bottom middle.',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 6, message: 'Card number must be at least 6 digits' },
maxLength: { value: 8, message: 'Card number must not exceed 8 digits' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
},
WA: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
options: [{ label: 'Australia', value: 'AUS' }, { label: 'New Zealand', value: 'NZL' }],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'select', name: 'region', dataType: 'text',
label: 'State or Territory of Issue',
options: [
{ label: 'Australian Capital Territory', value: 'ACT' },
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Western Australia', value: 'WA' }
],
placeholder: 'Please select',
rules: { required: { value: true, message: 'Please select your state' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number', placeholder: 'e.g. 1234567890',
rules: {
required: { value: true, message: 'Please enter your licence number' },
minLength: { value: 7, message: 'Licence number must be at least 7 characters' },
maxLength: { value: 7, message: 'Licence number must not exceed 7 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.document_number',
label: 'Card Number', placeholder: 'e.g. 1234567890',
helperText: 'You will find your Card Number on the back of your card, in the middle of the right side.',
rules: {
required: { value: true, message: 'Please enter your card number' },
minLength: { value: 8, message: 'Card number must be at least 8 characters' },
maxLength: { value: 10, message: 'Card number must not exceed 10 characters' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' }
},
standardDate: true, configYear: true
}
]
}
},
NZL: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: "Country of Driver's Licence",
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Licence Number',
rules: {
required: { value: true, message: 'Please enter your licence number' },
pattern: { value: '^[a-zA-Z0-9]+$', message: 'Please enter alphanumeric values only' }
}
},
{
fieldType: 'input', dataType: 'number', name: 'extraData.licence_version',
label: 'Version Number', placeholder: 'e.g. 123',
rules: {
required: { value: true, message: 'Please enter your version number' },
minLength: { value: 3, message: 'Version number must be at least 3 characters' },
maxLength: { value: 3, message: 'Version number must not exceed 3 characters' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Expiry Date',
calendarConfig: { type: 'gregory', locale: 'en' }
}
]
}
}
}
},
{
type: 'PASSPORT',
label: 'Passport',
countries: {
default: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: 'Passport Issuing Country',
options: [
// All ISO 3166-1 alpha-3 countries, sorted alphabetically by label.
// Contains ~250 entries in the format { label: 'Country Name', value: 'ALPHA3_CODE' }.
// First few: { label: 'Afghanistan', value: 'AFG' }, { label: 'Albania', value: 'ALB' }, ...
// Last: { label: 'Zambia', value: 'ZMB' }, { label: 'Zimbabwe', value: 'ZWE' }
],
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Passport Number', placeholder: 'e.g. A1234567890',
rules: { required: { value: true, message: 'Please enter your passport number' } }
}
]
}
},
AUS: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: 'Passport Issuing Country',
options: [/* all ISO 3166-1 alpha-3 countries, sorted alphabetically */],
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Passport Number', placeholder: 'e.g. A1234567890',
rules: {
required: { value: true, message: 'Please enter your passport number' },
minLength: { value: 8, message: 'Passport number must be at least 8 characters' },
maxLength: { value: 9, message: 'Passport number must not exceed 9 characters' }
}
}
]
}
},
NZL: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: 'Passport Issuing Country',
options: [/* all ISO 3166-1 alpha-3 countries, sorted alphabetically */],
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Passport Number', placeholder: 'e.g. A1234567890',
rules: {
required: { value: true, message: 'Please enter your passport number' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Date of Expiry',
rules: {
required: { value: true, message: "Please enter your passport's expiry date" }
},
calendarConfig: {
type: 'gregory', locale: 'en',
day: { placeholder: 'Day' }, month: { placeholder: 'Month' }, year: { placeholder: 'Year' },
dateRange: {
min: { value: 'now' },
max: { value: '+10 years' }
},
message: "Please enter your passport's expiry date"
}
}
]
}
},
IND: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'country',
label: 'Passport Issuing Country',
options: [/* all ISO 3166-1 alpha-3 countries, sorted alphabetically */],
rules: { required: { value: true, message: 'Please select a country' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Passport Number', placeholder: 'e.g. A1234567890',
rules: {
required: { value: true, message: 'Please enter your passport number' }
}
},
{
fieldType: 'input', name: 'extraData.document_number', dataType: 'document_extra',
label: 'File Number', placeholder: 'e.g. ABCD12345678',
rules: {
required: { value: true, message: 'Please enter your File Number' }
}
}
]
}
}
}
},
{
type: 'NATIONAL_HEALTH_ID',
label: 'Medicare card',
countries: {
default: {
default: {
fields: [
{
fieldType: 'select', dataType: 'text', name: 'idSubType',
label: 'Medicare Card Colour',
options: [
{ label: 'Green', value: 'G' },
{ label: 'Blue', value: 'B' },
{ label: 'Yellow', value: 'Y' }
],
placeholder: 'Select Medicare Card Colour',
rules: { required: { value: true, message: 'Please select your Medicare card colour' } }
},
{
fieldType: 'input', dataType: 'text', name: 'idNumber',
label: 'Medicare Card Number',
rules: {
required: { value: true, message: 'Please enter your Medicare card number' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' },
minLength: { value: 10, message: 'Medicare card number must be at least 10 digits' },
maxLength: { value: 10, message: 'Medicare card number must be not exceed 10 digits' }
}
},
{
fieldType: 'input', dataType: 'document_extra', name: 'extraData.reference',
label: 'Position on Card',
rules: {
required: { value: true, message: 'Please enter your position on card' },
pattern: { value: '^[0-9]+$', message: 'Please enter numeric values only' },
maxLength: { value: 1, message: 'Position on card must not exceed 1 digit' }
}
},
{
fieldType: 'date', dataType: 'text', name: 'idExpiry',
label: 'Date of Expiry',
rules: { required: { value: true, message: 'Please enter your Medicare expiry date' } },
calendarConfig: {
type: 'gregory', locale: 'en',
message: 'Please enter valid Medicare expiry date'
}
},
{
fieldType: 'select', dataType: 'text', name: 'middleNameDisplayType',
label: 'How is middle name displayed on the card?',
options: [
{ label: 'No Middle Name', value: 'No middle name' },
{ label: 'Initial Only', value: 'Initial only' },
{ label: 'Full Middle Name', value: 'Full middle name' }
]
},
{
fieldType: 'input', dataType: 'text', name: 'extraData.display_name_line1',
label: 'Name displayed on card',
disabledVisually: true
},
{
fieldType: 'hidden', dataType: 'text', name: 'extraData.display_middle_name',
label: 'Middle name displayed on card'
}
]
}
}
}
}
],
cta: { label: 'Next' },
additionInfo: {
label: 'Additional ID',
descriptions: [{ label: 'We need an additional ID verify your identity.' }]
}
}
```
### Doc Upload
```javascript theme={null}
{
name: 'DOC_UPLOAD',
mode: 'business',
type: 'manual',
cta: { label: 'Next' }
}
```
### Required Document Upload
```javascript theme={null}
{
name: 'REQUIRED_DOCUMENT_UPLOAD',
mode: 'individual',
type: 'manual',
title: { label: 'Required Documents' },
descriptions: [{ label: 'All documents in this section must be uploaded' }],
cta: { label: 'Next' }
}
```
### Partial Document Upload
```javascript theme={null}
{
name: 'PARTIAL_DOCUMENT_UPLOAD',
mode: 'individual',
type: 'manual',
title: { label: 'Additional documents' },
descriptions: [{ label: 'Upload at least one document from this list' }],
cta: { label: 'Next' }
}
```
### Optional Document Upload
```javascript theme={null}
{
name: 'OPTIONAL_DOCUMENT_UPLOAD',
mode: 'individual',
type: 'manual',
title: { label: 'Optional documents' },
descriptions: [{ label: 'These documents are optional but may help with your application' }],
cta: { label: 'Next' }
}
```
***
## Custom Fields
You can add custom fields to the Personal Details and Review screens. Custom field values are stored in the `extraData` object of the individual entity.
### Naming Convention
Custom field names must use the `extraData.idv.` prefix followed by your desired field name:
```
extraData.idv.{fieldName}
```
For example, a field named `extraData.idv.personTitle` will store its value under the key `idv.personTitle` in the individual's `extraData` object.
### Adding a Custom Field
To add a custom field, include it in the `fields` array of your country configuration. When you only provide custom fields (without redefining existing fields), they appear at the **top** of the form, before the default fields.
```javascript theme={null}
const personal = sdk.component('form', {
name: 'PERSONAL',
type: 'manual',
personal: {
countries: {
default: {
default: {
fields: [
{
name: 'extraData.idv.personTitle',
fieldType: 'input',
dataType: 'text',
label: 'Title',
rules: {
required: {
value: true,
message: 'Please enter your title'
}
}
}
]
}
}
}
}
});
```
You must define custom fields for **all** your supported countries. Configuration overrides are merged, so if you only define a custom field under one country (e.g., `AUS`), other countries will use the built-in default without your custom field — producing inconsistent forms. If you use country-specific configurations (e.g., `AUS`, `NZL`), each country entry must include the custom field.
***
## Field Ordering
To control the order of fields on the Personal Details screen, redefine the `fields` array with entries in the desired order. Each entry needs at least the `name` property to reference an existing default field.
### How It Works
* Fields appear in the order they are listed in the `fields` array
* To reference an existing default field, include an entry with just `{ name: 'fieldName' }` — the default properties are preserved
* To add a custom field at a specific position, insert it at the desired index in the array
* Fields from the default configuration that are **not** included in your array will appear after your defined fields
### Reordering Default Fields
For example, if the default order is `givenName`, `middleName`, `familyName` and you want `familyName` first:
```javascript theme={null}
const personal = sdk.component('form', {
name: 'PERSONAL',
type: 'manual',
personal: {
countries: {
default: {
default: {
fields: [
{ name: 'familyName' },
{ name: 'givenName' },
{ name: 'middleName' }
]
}
}
}
}
});
```
### Inserting a Custom Field at a Specific Position
To insert a custom field after `givenName`, redefine `givenName` (with just `name`) and place the custom field right after it:
```javascript theme={null}
const personal = sdk.component('form', {
name: 'PERSONAL',
type: 'manual',
personal: {
countries: {
default: {
default: {
fields: [
{ name: 'givenName' },
{
name: 'extraData.idv.personTitle',
fieldType: 'input',
dataType: 'text',
label: 'Title',
rules: {
required: {
value: true,
message: 'Please enter your title'
}
}
}
]
}
}
}
}
});
```
This places `Title` directly after `Given Name`, with all remaining default fields (`middleName`, `familyName`, `dateOfBirth`, address) following after.
***
## Document Upload Configuration
Document upload is configured through the recipe's `docUpload` property:
```javascript theme={null}
const sdk = await OneSdk({
session: { token: 'your-token' },
recipe: {
form: {
provider: {
name: 'react',
googleApiKey: 'your-key'
},
docUpload: {
requestedDocuments: [
{ documentType: 'PROOF_OF_ADDRESS' },
{ documentType: 'BANK_STATEMENT' }
],
partialDocuments: [
{
title: 'Additional Identity Documents',
minimumRequirement: 1,
documents: [
{ documentType: 'BIRTH_CERTIFICATE' },
{ documentType: 'UTILITY_BILL' },
{ documentType: 'TAX_RETURN' }
]
}
],
optionalDocuments: [
{ documentType: 'EMPLOYMENT_LETTER' }
]
}
}
}
});
```
### DocUploadRecipeOptions
| Property | Type | Description |
| -------------------- | ------- | ----------------------------------------------------------------------------- |
| `requestedDocuments` | `array` | Documents that **must** be uploaded. Each item has a `documentType` property. |
| `partialDocuments` | `array` | Groups of documents where a minimum number must be uploaded. |
| `optionalDocuments` | `array` | Documents that **may** be uploaded but are not required. |
### Partial Documents
| Property | Type | Description |
| -------------------- | -------- | ----------------------------------------------------- |
| `title` | `string` | Title displayed for this document group |
| `documents` | `array` | Available documents in this group |
| `minimumRequirement` | `number` | Minimum number of documents to upload from this group |
### Document Upload Validation
File uploads support validation rules:
```typescript theme={null}
type DocUploadRules = {
min_size?: { value: number; message: string };
max_size?: { value: number; message: string };
mime?: {
value: {
'image/jpeg'?: boolean;
'image/png'?: boolean;
'image/gif'?: boolean;
'image/webp'?: boolean;
'image/tiff'?: boolean;
'image/bmp'?: boolean;
'application/pdf'?: boolean;
};
message: string;
}
}
```
***
## Screen Configuration Examples
### Customizing the Welcome Screen
```javascript theme={null}
const welcome = sdk.component('form', {
name: 'WELCOME',
mode: 'individual',
type: 'manual',
// Welcome screen customization (as part of TPageConfig)
welcome: {
name: 'WELCOME',
logo: { src: 'https://your-logo-url.com/logo.png' },
title: {
label: 'Verify Your Identity',
style: {
'ff-title': { color: '#1a1a1a', fontSize: '32px' }
}
},
subtitle: {
label: 'We need to verify your identity to continue.'
},
descriptions: [
{ label: 'This process takes about 2 minutes' },
{ label: 'Have your ID document ready' }
],
cta: {
label: 'Start Verification'
},
style: {
'ff-wrapper': { maxWidth: '500px', margin: '0 auto' },
font: { name: 'Inter', url: 'https://fonts.googleapis.com/css2?family=Inter' }
}
}
});
```
### Customizing the Result Screen
```javascript theme={null}
const result = sdk.component('form', {
name: 'RESULT',
type: 'manual',
state: 'SUCCESS',
title: { label: 'Verification Complete' },
descriptions: [
{ label: 'Your identity has been verified.' }
],
cta: {
label: 'Continue to Dashboard',
onClick: () => window.location.href = '/dashboard'
}
});
```
***
## Country-Specific Field Configuration
In manual mode, form fields can be configured per country and state using the `CountryConfig` type. This is used in two places:
* **Document Selection screen** — inside each entry of the [`documents`](#idocuments) array, via the `countries` property
* **Personal Details screen** — via the `personal.countries` property
```typescript theme={null}
type CountryConfig = {
[countryCode: string]: { // e.g., 'AUS', 'NZL', 'default'
[stateCode: string]: { // e.g., 'NSW', 'VIC', 'default'
image?: string;
fields: FormField[];
}
}
}
```
Use `'default'` as a fallback key when no specific country or state match is found.
### Document-Type-Specific Configuration
On the Document Selection screen, the `countries` configuration is nested **within each document type** in the `documents` array. This means the full configuration hierarchy has three levels:
1. **Document type** — e.g., `DRIVERS_LICENCE`, `PASSPORT`, `NATIONAL_HEALTH_ID`
2. **Country** — e.g., `AUS`, `NZL`, `default`
3. **State** — e.g., `NSW`, `VIC`, `default`
Each document type carries its own independent `CountryConfig`, so different document types can require entirely different fields for the same country. For example, a driver's licence in Australia requires a licence number and card number, while a passport for the same country requires a passport number and expiry date.
```javascript theme={null}
const document = sdk.component('form', {
name: 'DOCUMENT',
mode: 'individual',
type: 'manual',
numberOfIDs: 2,
documents: [
{
// Document type level
type: 'DRIVERS_LICENCE',
countries: {
// Country level
AUS: {
// State level
NSW: {
fields: [
{ fieldType: 'input', name: 'licenceNumber', title: { label: 'Licence Number' } },
{ fieldType: 'input', name: 'cardNumber', title: { label: 'Card Number' } }
]
},
default: {
fields: [
{ fieldType: 'input', name: 'licenceNumber', title: { label: 'Licence Number' } }
]
}
}
}
},
{
// Different document type — different fields for the same country
type: 'PASSPORT',
countries: {
AUS: {
default: {
fields: [
{ fieldType: 'input', name: 'passportNumber', title: { label: 'Passport Number' } },
{ fieldType: 'date', name: 'expiryDate', title: { label: 'Expiry Date' } }
]
}
},
default: {
default: {
fields: [
{ fieldType: 'input', name: 'passportNumber', title: { label: 'Passport Number' } }
]
}
}
}
}
]
});
```
The Personal Details screen does not have the document-type level — it uses `CountryConfig` directly under `personal.countries`.
**Document Selection example:**
Configures country and state-specific fields for each document type. When a user selects a country (e.g., Australia) and state (e.g., NSW), the matching field configuration is used. The `'default'` key acts as a fallback.
```javascript theme={null}
const document = sdk.component('form', {
name: 'DOCUMENT',
mode: 'individual',
type: 'manual',
numberOfIDs: 2,
documents: [
{
type: 'DRIVERS_LICENCE',
countries: {
// Australia — with state-specific fields
AUS: {
NSW: {
fields: [
{ fieldType: 'input', name: 'licenceNumber', title: { label: 'Licence Number' } },
{ fieldType: 'input', name: 'cardNumber', title: { label: 'Card Number' } },
{ fieldType: 'date', name: 'expiryDate', title: { label: 'Expiry Date' } }
]
},
VIC: {
fields: [
{ fieldType: 'input', name: 'licenceNumber', title: { label: 'Licence Number' } },
{ fieldType: 'date', name: 'expiryDate', title: { label: 'Expiry Date' } }
]
},
// Fallback for other Australian states
default: {
fields: [
{ fieldType: 'input', name: 'licenceNumber', title: { label: 'Licence Number' } },
{ fieldType: 'date', name: 'expiryDate', title: { label: 'Expiry Date' } }
]
}
},
// New Zealand — no state-level distinction
NZL: {
default: {
fields: [
{ fieldType: 'input', name: 'licenceNumber', title: { label: 'Licence Number' } },
{ fieldType: 'input', name: 'version', title: { label: 'Version Number' } }
]
}
},
// Fallback for all other countries
default: {
default: {
fields: [
{
fieldType: 'select',
name: 'country',
options: [
{ label: 'Australia', value: 'AUS' },
{ label: 'New Zealand', value: 'NZL' }
]
}
]
}
}
}
},
{
type: 'PASSPORT',
countries: {
default: {
default: {
fields: [
{
fieldType: 'select',
name: 'country',
options: [
{ label: 'Australia', value: 'AUS' },
{ label: 'New Zealand', value: 'NZL' }
]
}
]
}
}
}
}
]
});
```
**Personal Details example:**
Configures country-specific personal detail fields. Different countries can require different fields or validation rules.
```javascript theme={null}
const personal = sdk.component('form', {
name: 'PERSONAL',
mode: 'individual',
type: 'manual',
personal: {
countries: {
// Australia — stricter age range
AUS: {
default: {
fields: [
{
fieldType: 'date',
dataType: 'text',
name: 'dateOfBirth',
hide: false,
calendarConfig: {
age: {
min: 18,
max: 65,
message: 'The age must be between 18 and 65'
}
}
}
]
}
},
// Fallback for all other countries
default: {
default: {
fields: [
{
fieldType: 'date',
dataType: 'text',
name: 'dateOfBirth',
hide: false,
calendarConfig: {
age: {
min: 16,
max: 80,
message: 'The age must be between 16 and 80'
}
}
}
]
}
}
}
}
});
```
The lookup order is:
1. Exact country + exact state match (e.g., `AUS` → `NSW`)
2. Exact country + `default` state (e.g., `AUS` → `default`)
3. `default` country + `default` state
***
## Related
* [Form Module Overview](/docs/sdk-reference/form-module)
* [Form Screens](/docs/sdk-reference/form-module/screens)
* [Individual Module - Document Structure](/docs/sdk-reference/individual-module#document-structure)