Number Input Component

Number Input component is an input field for capturing numbers (with and without decimal 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 Number Input Hugo interface is directly supported by Form Component.

Go

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

HTML

Expanding from Form Component, Number Input component is to facilitate an input for capturing number value with and without decimal format. Should a browser cannot provide an user interface for this <input>, it will falls back to <input type="text"> gracefully and automatically.

By default, no pattern validation is needed as most supported browser already handled it natively.

To allow decimal number (e.g. 0.01), you need to add step= attribute with the decimal limits you need. Example, for upto 8 decimal places, the attribute should be step="0.00000001". Comma decimal symbol (e.g. 0,01) is usually not supported by the browser. Enabling this attribute allows user to step up/down via the stepping button.

To limit the number range, use min= and max= attributes matching the step= attribute format.

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

<label for="input-javascript-id">Email</label>
<input type="number"
	id="input-javascript-id"
	name="example"
	value="25"
	required
	disabled
	autofocus
	autocomplete
	readonly
	min="0"
	max="100"
	step="0.01"
	list="datalist-id"
/>
<datalist id="datalist-id">
	<option value="45.5" />
	...
</datalist>

Here is an example:

CSS

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

Javascript

All Number Input Javascript is directly supported by Form Component.

Sass

All Number Input Sass is directly supported by Form Component.

Researches

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

SCHEDULED COMING SOON

Epilogue

That’s all about Number 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.