Tel Input Component

Tel Input component is an input field for capturing a short phone number input from user. Bissetii did a number of researches on its own and decided to only provide styling for proper HTML5 semantic syntax defined by w3.org.

This component is available starting from v1.12.1.

Hugo

All Tel Input Hugo interface is directly supported by Form Component.

Go

All Tel Input Go interface is directly supported by Form Component.

HTML

Expanding from Form Component, Tel Input component is to facilitate an input for entering a telephone number.

To ensure the accepted phone number is complying to your specific pattern, use a regular expression pattern for pattern= attribute.

For accepting phone number with dashes (-), either plus + prefix or ITU prefix (00 or 01) like +6012345678912, 006434774000, 016434774000, and +6012-345-678-912, the pattern is as follows:

1

(\+?)([0-9\-]+)

For accepting phone number witout the dash (-) instead, the pattern is as follows:

1

(\+?)([0-9]+)

For accepting alphanumeric numbers with the dash (-) such as 800-MDN-ROCKS, where there is 3 leading numbers, the pattern is as follows:

1

(([A-z0-9]){3,3})-([A-z0-9\-]+)

For accepting alphanumeric numbers with the dash(-) and international telephone prefix such as +60-800-MDN-ROCKS, the pattern is as follows:

1

(\+?)([0-9\-]+?)-(([A-z0-9]){3,3})-([A-z0-9\-]+)

An all compatible attributes HTML syntax is shown as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<label for="input-javascript-id">Text</label>
<input type="tel"
	id="input-javascript-id"
	name="example"
	value="...YOUR TEXT VALUE..."
	pattern="...YOUR PATTERN..."
	minlength="8"
	maxlength="40"
	spellcheck
	placeholder="...YOUR PLACEHOLDER..."
	required
	disabled
	autofocus
	autocomplete
	readonly
	list="datalist-id"
/>
<datalist id="datalist-id">
	<option value="...OPTION 1 TEXT..." label="Label 1" />
	...
</datalist>

Here is an example:

CSS

All Tel Input CSS variables is directly supported by Form Component.

Javascript

All Tel Input Javascript is directly supported by Form Component.

Sass

All Tel Input Sass is directly supported by Form Component.

Researches

Here are the researches done to ensure Tel Input component meets the necessary quality assurances:

SCHEDULED COMING SOON

Epilogue

That’s all about Tel Input component in Bissetii. If you need more feature or need to report a bug, please feel free to file an issue at our Issue Section.