Phone input

setup

Import the PhoneInput component in a script tag.

Svelte Copy

import { PhoneInput } from "@mgisolutions/design-system/svelte";

Demonstrate

Phone Number

Phone number

Carrier will contact you for delivery.

Svelte Copy

Custom dropdown for mobile view or many type

Demonstrate

Phone Number

Phone number

Carrier will contact you for delivery.

Number

Prefer Countries

Country Code

Dial Code

Label

Placeholder

Name

Error message

Disabled

Required

International

Searchable

Error

Svelte Copy

Name	Description	Type	Default
label	The string used to show the input	string	empty
disabled	If set, then it disabled	boolean	false
placeholder	placeholder	string	Phone Number
number	phone number exclude calling code	string
countryCode	the code of country	string	us
dialCode	The calling code of country	string	1
international	Condition to show Flags or not	boolean	false
preferred	the countries code to show top of list	Array<string>	[]
searchable	Can search countries or not, is work when international = true	boolean	true
mobileFullScreen	If true, dropdown has width and height fulll when screen < 768	boolean	true
showHeader	Show header of dropdown option	boolean	true
titleOfOptions	title of dropdown option	string	empty
mobileScreenBreakPoint	break point of screen to show full width and height of phone dropdown option	number	768
error	Does field have validation errors?	boolean	false
errorMessage	Does field have validation errors?	string	empty
name	Used to specify the name of the control; Useful if dealing with forms	string	empty