1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | <div data-text-input
|
9 | class="bx--form-item bx--text-input-wrapper bx--password-input-wrapper">
|
10 | <label for="text-input-3" class="bx--label">Text Input label</label>
|
11 | <input id="text-input-3" type="password"
|
12 | class="bx--text-input" placeholder="Placeholder text"
|
13 | data-toggle-password-visibility>
|
14 | <button
|
15 | class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom"
|
16 | aria-label="Show password">
|
17 | <svg class="bx--icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
|
18 | <path
|
19 | d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z">
|
20 | </path>
|
21 | </svg>
|
22 | <svg class="bx--icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
|
23 | <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z">
|
24 | </path>
|
25 | <path
|
26 | d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z">
|
27 | </path>
|
28 | </svg>
|
29 | </button>
|
30 | </div>
|
31 |
|
32 | <div data-text-input
|
33 | class="bx--form-item bx--text-input-wrapper bx--password-input-wrapper">
|
34 | <label for="text-input-4" class="bx--label">Text Input label</label>
|
35 | <input data-invalid id="text-input-4" type="password"
|
36 | class="bx--text-input" placeholder="Placeholder text"
|
37 | data-toggle-password-visibility>
|
38 | <button
|
39 | class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom"
|
40 | aria-label="Show password">
|
41 | <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
|
42 | <path
|
43 | d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z">
|
44 | </path>
|
45 | </svg>
|
46 | <svg class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
|
47 | <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z">
|
48 | </path>
|
49 | <path
|
50 | d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z">
|
51 | </path>
|
52 | </svg>
|
53 | </button>
|
54 | <div class="bx--form-requirement">
|
55 | Validation message here
|
56 | </div>
|
57 | </div>
|
58 |
|
59 | <div data-text-input
|
60 | class="bx--form-item bx--text-input-wrapper bx--password-input-wrapper">
|
61 | <label for="text-input-5" class="bx--label">Text Input label</label>
|
62 | <div class="bx--form__helper-text">
|
63 | Optional helper text goes here
|
64 | </div>
|
65 | <input id="text-input-5" type="password"
|
66 | class="bx--text-input" placeholder="Placeholder text"
|
67 | data-toggle-password-visibility>
|
68 | <button
|
69 | class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom"
|
70 | aria-label="Show password">
|
71 | <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
|
72 | <path
|
73 | d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z">
|
74 | </path>
|
75 | </svg>
|
76 | <svg class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
|
77 | <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z">
|
78 | </path>
|
79 | <path
|
80 | d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z">
|
81 | </path>
|
82 | </svg>
|
83 | </button>
|
84 | </div>
|
85 |
|
86 | <div data-text-input
|
87 | class="bx--form-item bx--text-input-wrapper bx--password-input-wrapper"
|
88 | style="width: 320px">
|
89 | <label for="text-input-6" class="bx--label">Text Input label</label>
|
90 | <div class="bx--form__helper-text">
|
91 | Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
|
92 | </div>
|
93 | <input id="text-input-6" type="password"
|
94 | class="bx--text-input" placeholder="Placeholder text"
|
95 | data-toggle-password-visibility>
|
96 | <button
|
97 | class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom"
|
98 | aria-label="Show password">
|
99 | <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
|
100 | <path
|
101 | d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z">
|
102 | </path>
|
103 | </svg>
|
104 | <svg class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
|
105 | <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z">
|
106 | </path>
|
107 | <path
|
108 | d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z">
|
109 | </path>
|
110 | </svg>
|
111 | </button>
|
112 | </div>
|
113 |
|
114 | <div data-text-input
|
115 | class="bx--form-item bx--text-input-wrapper bx--password-input-wrapper">
|
116 | <label for="text-input-7" class="bx--label bx--label--disabled">Text Input label</label>
|
117 | <div class="bx--form__helper-text bx--form__helper-text--disabled">
|
118 | Optional helper text goes here
|
119 | </div>
|
120 | <input id="text-input-7" type="password"
|
121 | class="bx--text-input" placeholder="Placeholder text"
|
122 | data-toggle-password-visibility disabled>
|
123 | <button
|
124 | class="bx--text-input--password__visibility bx--tooltip__trigger bx--tooltip--icon__bottom"
|
125 | aria-label="Show password">
|
126 | <svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
|
127 | <path
|
128 | d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z">
|
129 | </path>
|
130 | </svg>
|
131 | <svg class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
|
132 | <path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z">
|
133 | </path>
|
134 | <path
|
135 | d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z">
|
136 | </path>
|
137 | </svg>
|
138 | </button>
|
139 | </div>
|