Phone
Phone fields collect a mobile or landline number from the user. This element includes a country code selector, input validation, and real-time formatting. Use this field to support international input and enforce phone number policies.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Phone | UI component type |
| Group | Field | Belongs to the "Field" group in UI catalog |
| Identifier | 36 | Unique element ID |
| Preview | ✓ | See image preview above |
| Value | Y | Accepts user-entered phone number |
| Mandatory | Y | Required for form submission |
| Error | Y | Displays validation error for wrong format |
| Min | No explicit minimum value | |
| Max | No explicit maximum value | |
| Read-only | Y | Can display as static, non-editable |
| Text, Icon | Y | Displays label and optional icon |
| Event | Y | Triggers on input or validation |
| Shade | Y | Uses shaded background |
| Children | No nested fields | |
| List | Not a list container |
Usage Example
<PhoneInput
label="Mobile number"
defaultCountry="IL"
required
onChange={handlePhoneChange}
/>
SDK Integration
The Edit Profile screen uses this element. It connects to the SDK method:
Method: /account/edit
Updates a doctor’s profile. The phone number field is mandatory and supports validation against formatting and country-specific rules.
Example UI Placement
| Level | ID | Type | Value | Description |
|---|---|---|---|---|
1 | phone | Phone | Mobile number | Editable user contact number |
Notes
- Includes dropdown for country dialing code selection.
- Validates length and structure based on selected region.
- Commonly used in authentication, profile, and contact flows.