UNPKG

carbon-components/html/number-input/number-input--mobile.html

Version:

1<!--
Copyright IBM Corp. 2016, 2018
3
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
6-->
7
8<div class="bx--form-item">
<div data-numberinput class="
  bx--number
  
   bx--number--mobile 
  ">
  <label for="mobile-number-input0" class="bx--label">Number input label</label>
  <div class="bx--number__input-wrapper">
    <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
      aria-live="polite" aria-atomic="true">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M8 0L4 4 0 0z"></path></svg>
    </button>
    <input id="mobile-number-input0" type="number" pattern="\d*" min="0" max="100" value="1">
    <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
      aria-live="polite" aria-atomic="true">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M0 4l4-4 4 4z"></path></svg>
    </button>
  </div>
</div>
27</div>
28
29<div class="bx--form-item">
<div data-invalid data-numberinput class="
  bx--number
  
   bx--number--mobile 
">
  <label for="mobile-number-input1" class="bx--label">Number input label</label>
  <div class="bx--number__input-wrapper">
    <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
      aria-live="polite" aria-atomic="true">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M8 0L4 4 0 0z"></path></svg>
    </button>
    <input id="mobile-number-input1" type="number" pattern="\d*" min="0" max="100" value="1" role="alert"
      aria-atomic="true">
    <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
      aria-live="polite" aria-atomic="true">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M0 4l4-4 4 4z"></path></svg>
    </button>
  </div>
  <div class="bx--form-requirement">
    Invalid number
  </div>
</div>
52</div>
53
54<div class="bx--form-item">
<div data-invalid data-numberinput class="
    bx--number
    
     bx--number--mobile 
    bx--number--nolabel
  ">
  <div class="bx--number__input-wrapper">
    <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
      aria-live="polite" aria-atomic="true">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M8 0L4 4 0 0z"></path></svg>
    </button>
    <input id="mobile-number-input2" type="number" pattern="\d*" min="0" max="100" value="1" role="alert"
      aria-atomic="true">
    <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
      aria-live="polite" aria-atomic="true">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M0 4l4-4 4 4z"></path></svg>
    </button>
  </div>
  <div class="bx--form-requirement">
    Invalid number
  </div>
</div>
77</div>
78
79<div class="bx--form-item">
<div data-numberinput class="
  bx--number
  
   bx--number--mobile 
  bx--number--helpertext
">
  <label for="mobile-number-input3" class="bx--label">Number input label</label>
  <div class="bx--form__helper-text">
    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
  </div>
  <div class="bx--number__input-wrapper">
    <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
      aria-live="polite" aria-atomic="true">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M8 0L4 4 0 0z"></path></svg>
    </button>
    <input id="mobile-number-input3" type="number" pattern="\d*" min="0" max="100" value="1">
    <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
      aria-live="polite" aria-atomic="true">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M0 4l4-4 4 4z"></path></svg>
    </button>
  </div>
</div>
102</div>
103
104<div class="bx--form-item">
<div data-invalid data-numberinput class="
  bx--number
  
   bx--number--mobile 
  bx--number--helpertext
">
  <label for="mobile-number-input4" class="bx--label">Number input label</label>
  <div class="bx--form__helper-text">
    Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)
  </div>
  <div class="bx--number__input-wrapper">
    <button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"
      aria-live="polite" aria-atomic="true">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M8 0L4 4 0 0z"></path></svg>
    </button>
    <input id="mobile-number-input4" type="number" pattern="\d*" min="0" max="100" value="1" role="alert"
      aria-atomic="true">
    <button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"
      aria-live="polite" aria-atomic="true">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M0 4l4-4 4 4z"></path></svg>
    </button>
  </div>
  <div class="bx--form-requirement">
    Invalid number
  </div>
</div>
131</div>

1	`<!--`
2	`Copyright IBM Corp. 2016, 2018`
3
4	`This source code is licensed under the Apache-2.0 license found in the`
5	`LICENSE file in the root directory of this source tree.`
6	`-->`
7
8	`<div class="bx--form-item">`
9	`<div data-numberinput class="`
10	`bx--number`
11
12	`bx--number--mobile`
13	`">`
14	`<label for="mobile-number-input0" class="bx--label">Number input label</label>`
15	`<div class="bx--number__input-wrapper">`
16	`<button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"`
17	`aria-live="polite" aria-atomic="true">`
18	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M8 0L4 4 0 0z"></path></svg>`
19	`</button>`
20	`<input id="mobile-number-input0" type="number" pattern="\d*" min="0" max="100" value="1">`
21	`<button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"`
22	`aria-live="polite" aria-atomic="true">`
23	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M0 4l4-4 4 4z"></path></svg>`
24	`</button>`
25	`</div>`
26	`</div>`
27	`</div>`
28
29	`<div class="bx--form-item">`
30	`<div data-invalid data-numberinput class="`
31	`bx--number`
32
33	`bx--number--mobile`
34	`">`
35	`<label for="mobile-number-input1" class="bx--label">Number input label</label>`
36	`<div class="bx--number__input-wrapper">`
37	`<button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"`
38	`aria-live="polite" aria-atomic="true">`
39	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M8 0L4 4 0 0z"></path></svg>`
40	`</button>`
41	`<input id="mobile-number-input1" type="number" pattern="\d*" min="0" max="100" value="1" role="alert"`
42	`aria-atomic="true">`
43	`<button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"`
44	`aria-live="polite" aria-atomic="true">`
45	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M0 4l4-4 4 4z"></path></svg>`
46	`</button>`
47	`</div>`
48	`<div class="bx--form-requirement">`
49	`Invalid number`
50	`</div>`
51	`</div>`
52	`</div>`
53
54	`<div class="bx--form-item">`
55	`<div data-invalid data-numberinput class="`
56	`bx--number`
57
58	`bx--number--mobile`
59	`bx--number--nolabel`
60	`">`
61	`<div class="bx--number__input-wrapper">`
62	`<button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"`
63	`aria-live="polite" aria-atomic="true">`
64	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M8 0L4 4 0 0z"></path></svg>`
65	`</button>`
66	`<input id="mobile-number-input2" type="number" pattern="\d*" min="0" max="100" value="1" role="alert"`
67	`aria-atomic="true">`
68	`<button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"`
69	`aria-live="polite" aria-atomic="true">`
70	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M0 4l4-4 4 4z"></path></svg>`
71	`</button>`
72	`</div>`
73	`<div class="bx--form-requirement">`
74	`Invalid number`
75	`</div>`
76	`</div>`
77	`</div>`
78
79	`<div class="bx--form-item">`
80	`<div data-numberinput class="`
81	`bx--number`
82
83	`bx--number--mobile`
84	`bx--number--helpertext`
85	`">`
86	`<label for="mobile-number-input3" class="bx--label">Number input label</label>`
87	`<div class="bx--form__helper-text">`
88	`Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)`
89	`</div>`
90	`<div class="bx--number__input-wrapper">`
91	`<button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"`
92	`aria-live="polite" aria-atomic="true">`
93	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M8 0L4 4 0 0z"></path></svg>`
94	`</button>`
95	`<input id="mobile-number-input3" type="number" pattern="\d*" min="0" max="100" value="1">`
96	`<button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"`
97	`aria-live="polite" aria-atomic="true">`
98	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M0 4l4-4 4 4z"></path></svg>`
99	`</button>`
100	`</div>`
101	`</div>`
102	`</div>`
103
104	`<div class="bx--form-item">`
105	`<div data-invalid data-numberinput class="`
106	`bx--number`
107
108	`bx--number--mobile`
109	`bx--number--helpertext`
110	`">`
111	`<label for="mobile-number-input4" class="bx--label">Number input label</label>`
112	`<div class="bx--form__helper-text">`
113	`Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)`
114	`</div>`
115	`<div class="bx--number__input-wrapper">`
116	`<button aria-label="decrease number input" class="bx--number__control-btn down-icon" type="button"`
117	`aria-live="polite" aria-atomic="true">`
118	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M8 0L4 4 0 0z"></path></svg>`
119	`</button>`
120	`<input id="mobile-number-input4" type="number" pattern="\d*" min="0" max="100" value="1" role="alert"`
121	`aria-atomic="true">`
122	`<button aria-label="increase number input" class="bx--number__control-btn up-icon" type="button"`
123	`aria-live="polite" aria-atomic="true">`
124	`<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4" aria-hidden="true"><path d="M0 4l4-4 4 4z"></path></svg>`
125	`</button>`
126	`</div>`
127	`<div class="bx--form-requirement">`
128	`Invalid number`
129	`</div>`
130	`</div>`
131	`</div>`