The Phone Number component captures a domestic phone number with a configurable input mask. The default mask formats the entry as (999) 999-9999.
How to read settings tables
The tables below describe each configurable option as it displays in the Unqork IDE. Values are formatted as follows:
inline code— a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked
General Settings
| Setting | Field | Type | Default | Description |
|---|---|---|---|---|
| Property ID | key |
Text input | phoneNumberField |
The unique identifier for this component instance. |
Display Settings
Field Text
| Setting | Field | Type | Default | Description |
|---|---|---|---|---|
| Label Text | label |
Text input | — | Identifies the component on the canvas and informs end-users what information is requested. |
| Placeholder Text | placeholder |
Text input | — | Hint text displayed inside the input field to guide end-users on what to enter. |
| Prefix | prefix |
Text input | — | Text or symbol displayed before the input (for example, $, @). |
| Suffix | suffix |
Text input | — | Text or symbol displayed after the input (for example, .com). |
Contextual Help
| Setting | Field | Type | Default | Description |
|---|---|---|---|---|
| Tooltip | description |
Text input | — | A brief description that displays when a cursor is positioned over the tooltip icon. |
Default State Options
| Setting | Field | Type | Default | Description |
|---|---|---|---|---|
| Hide Field | hidden |
Toggle | OFF | Hides the component from end-users but always displays in the Module Builder. |
Formatting
| Setting | Field | Type | Default | Description |
|---|---|---|---|---|
| Autocomplete | disableAutoComplete |
Toggle | ON | Lets the browser suggest and autofill previously entered phone numbers. |
| ↳ Autocomplete Value | autocomplete |
Drop-down | — | Specifies the type of data the browser can autofill for this field. See Autocomplete Values. Visible when Autocomplete is ON. |
| input mask | inputMask |
Text input | (999) 999-9999 |
Enforces a specific phone number format. Numeric: 9; alphabetical: a; alphanumeric: *. |
| Mask Error Message | errors.mask |
Text input | must be a valid mask |
Displays when the entered value does not match the required mask format. |
Input Behavior
| Setting | Field | Type | Default | Description |
|---|---|---|---|---|
| Input Behavior | — | Drop-down | Enable User Input | Sets how end-users can interact with the field. |
- Enable User Input (default): End-users can type directly into the phone number field.
- Display as Text (
readOnlyView): Displays the stored value as plain text without the input element. ShowsNonewhen empty.- Read Only (
htmlReadOnly): Makes the field non-editable while still letting end-users view, select, and copy its content.- Disable User Input (
disabled): Prevents end-users from editing the field. The field displays with an altered appearance to indicate it is not editable.
Data Settings
Data Storage
| Setting | Field | Type | Default | Description |
|---|---|---|---|---|
| Store Data in Database | persistent |
Toggle | ON | When set to ON, this setting this setting stores field values to the database when the module saves, end-users navigate between Panel components, or end-users navigate between workflow screens. Set to OFF to exclude this field from server-side submissions. |
Note: Fields with Store Data in Database set to OFF are excluded from Plug-In component's API responses and Unqork's built-in tracker. When using a Plug-In component to remote-execute a module, any component whose value must be included in the API response requires Store Data in Database set to ON.
Validation Settings
User Input
| Setting | Field | Type | Default | Description |
|---|---|---|---|---|
| Required | validate.required |
Toggle | OFF | Requires a value before the module can be submitted. |
| Required Error Message | errors.required |
Text input | is required |
Displays when the required field is left empty. |
Advanced Settings
Additional Validation Options
| Setting | Field | Type | Default | Description |
|---|---|---|---|---|
| Min Length | validate.minLength |
Number input | — | Minimum number of characters required. |
| Min Length Error Message | errors.minlength |
Text input | Must be longer than |
Displays when the entered value is shorter than the minimum. |
| Max Length | validate.maxLength |
Number input | — | Maximum number of characters allowed. |
| Max Length Error Message | errors.maxlength |
Text input | Must be shorter than |
Displays when the entered value exceeds the maximum. |
| Regular Expression Pattern (RegEx) | validate.pattern |
Text input | — | A regex pattern the entered value must match before the module can be submitted. See Regular Expression Patterns for common patterns and a syntax reference. |
| Pattern Error Message | errors.pattern |
Text input | Does not match pattern |
Displays when the value does not match the regex pattern. |
Additional Styling
| Setting | Field | Type | Default | Description |
|---|---|---|---|---|
| custom CSS class | customClass |
Text input | — | A CSS class applied to the component for custom styling. |
Operations Builder
This component supports the Operations Builder in Vega modules. When the module or panel runtime is set to Vega (2.0), an Event Handlers section displays in the settings panel for configuring event-driven operations.
Changelog
| Date | Change |
|---|---|
| — | Initial publication. |