Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Form
  • Overview
  • Usage
  • Components Customization
  • Elements
    • Apps Icons
    • Breadcrumb
    • Color Picker
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Modal
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Reviews
    • Reviews Summary
    • Sheet
    • Skeleton
    • Slider
    • Social
    • Social Share
    • Tabs
  • Form
    • Button
    • Bottom Alert
    • Contacts
    • Date Time Picker
    • File Upload
    • Menu
    • Quantity Input
    • Select
    • Tel Input
  • Product
    • Add Product
    • Advertisement
    • Comments
    • Conditional Offer
    • Gifting
    • Installment
    • Meta Data
    • Offer
    • Offer Modal
    • Orders
    • Payments
    • Product Availability
    • Product Card
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Buy
    • Quick Order
    • Scopes
    • Search
  • User
    • Cart Summary
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Menu
    • User Profile
    • User Settings
    • Verify
  1. Form

Tel Input

The <salla-tel-input> web component is used to show a field for entering a telephone number, with country key/code prefix, and that can be customized using the properties' parameters available.

Example#

Tel Input Example

Usage#

HTML
JS
SASS

Properties#

PropertyAttributeDescriptionTypeDefault
Country Codecountry-codeCurrent country codestring'salla.config.get('user.country_code', 'SA')'
NamenameInput name valuestring``
PhonephoneCurrent phone numberstringundefined

Events#

EventDescriptionType
phoneEnteredThis event will be fired when the user enters the telephone input fieldCustomEvent<Phone>

Methods#

The pre-defined methods allow for calling functions built by Salla to carry out certain actvities, suh as getValues to fetch the inputted values, and isValid to determine whether or not the values are valid.
MethodDescriptionReturn Type
getValues()Gets current inputted valuesPromise<{[x: string]: string; countryCode: string; }>
isValid()Shows the validity of the current inputted valuesPromise<boolean>
Modified at 2024-08-18 09:26:07
Previous
Select
Next
Product