1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | <div
|
9 | class="bx--form-item bx--text-input-wrapper">
|
10 | <label for="text-input-3" class="bx--label">Text Input label</label>
|
11 | <input id="text-input-3" type="text" class="bx--text-input bx--text-input--light"
|
12 | placeholder="Placeholder text">
|
13 | </div>
|
14 |
|
15 | <div
|
16 | class="bx--form-item bx--text-input-wrapper">
|
17 | <label for="text-input-4" class="bx--label">Text Input label</label>
|
18 | <input data-invalid id="text-input-4" type="text"
|
19 | class="bx--text-input bx--text-input--light" placeholder="Placeholder text">
|
20 | <div class="bx--form-requirement">
|
21 | Validation message here
|
22 | </div>
|
23 | </div>
|
24 |
|
25 | <div
|
26 | class="bx--form-item bx--text-input-wrapper">
|
27 | <label for="text-input-5" class="bx--label">Text Input label</label>
|
28 | <div class="bx--form__helper-text">
|
29 | Optional helper text goes here
|
30 | </div>
|
31 | <input id="text-input-5" type="text" class="bx--text-input bx--text-input--light"
|
32 | placeholder="Placeholder text">
|
33 | </div>
|
34 |
|
35 | <div
|
36 | class="bx--form-item bx--text-input-wrapper"
|
37 | style="width: 320px">
|
38 | <label for="text-input-6" class="bx--label">Text Input label</label>
|
39 | <div class="bx--form__helper-text">
|
40 | Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
|
41 | </div>
|
42 | <input id="text-input-6" type="text" class="bx--text-input bx--text-input--light"
|
43 | placeholder="Placeholder text">
|
44 | </div>
|
45 |
|
46 | <div
|
47 | class="bx--form-item bx--text-input-wrapper">
|
48 | <label for="text-input-7" class="bx--label bx--label--disabled">Text Input label</label>
|
49 | <div class="bx--form__helper-text bx--form__helper-text--disabled">
|
50 | Optional helper text goes here
|
51 | </div>
|
52 | <input id="text-input-7" type="text" class="bx--text-input bx--text-input--light"
|
53 | placeholder="Placeholder text" disabled>
|
54 | </div>
|