Password Input Component

Password Input component is an input field for capturing sensitive short text 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 Password Input Hugo interface is directly supported by Form Component.

Go

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

HTML

Expanding from Form Component, Password Input component is to facilitate an input for entering a short data-sensitive text.

Patterns

To ensure the accepted text is complying to your specific pattern, use a regular expression pattern for pattern= attribute. Most browsers will perform native validation and Bissetii styles each of its state seamlessly.

For numeric pattern (e.g. PIN number):

1. 8 characters minimum: ([0-9]){8,}
2. 16 characters maximum:([0-9]){,16}
3. 8 minimum and 16 maximum: ([0-9]){8,16}

For alphanumeric with space pattern 8 characters minimum and 16 characters maximum (E.g. OTP Vertification codes):

1

([A-z0-9À-ž\s]){8,16}

For pattern accepting:

1. minimum 8 and 16 maximum characters
2. at least 1 lowercase a-Z
3. at least 1 uppercase A-Z
4. at least 1 number from 0-9
5. at least 1 symbol

1

^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[\(!@#\$%\^&\*\)]).{8,16}

Helper Labels

Bissetii prepared a number of quick helpers CSS classes for quickly and easily notify or educate users. There are 2 types: .info and .notice CSS classes. All the contents within are exactly shown as it is.

.info CSS class onto <label> generates a small label information board designed for education. This is very useful for stating essential information such as your password requirements. Example:

1
2
3
4
5
6
7
8
9

<label for="..." class="info">
<b>RULE:</b> Password must at least has:
	I. <b>ONE</b> lowercase (a-z)
	II. <b>ONE</b> uppercase letter (A-Z or À-ž)
	III. <b>ONE</b> number (0-9)
	IV. <b>ONE</b> symbol (!@#$%^&*()[])
	V. <b>Minimum 8</b> characters
</label>
<input type="password" ... />

.notice CSS class onto <label> with and without .info CSS class will highlight the content into high attention (e.g. colored red) notices. This is useful for reporting error for the field. Example:

1
2
3

<label class="info notice"> ... </label>
<input type="password" ... />
<label class="notice">Bad Password. Plaese comply to the rules above.</label>

It is advisable to place the .info before the <input> and .notice after it. That way, it simplifies the rendering and keeping the user interface clean and simple.

Codes

An all compatible attributes HTML syntax is shown as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<label for="input-javascript-id">Text</label>
<input type="password"
	id="input-javascript-id"
	name="example"
	value="...YOUR TEXT VALUE..."
	pattern="...YOUR PATTERN..."
	minlength="8"
	maxlength="40"
	placeholder="...YOUR PLACEHOLDER..."
	required
	disabled
	autofocus
	readonly
/>

Here is an example:

CSS

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

Javascript

All Password Input Javascript is directly supported by Form Component.

Sass

All Password Input Sass is directly supported by Form Component.

Researches

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

SCHEDULED COMING SOON

Epilogue

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