Stripped personal data from development repository
view | history | commit | commitdiff
Samo Penic
2019-02-20 83c3f647c35477564b77cbc5b36d37d793d5442a
commit | author | age
83c3f6 1 ---
SP 2 layout: docs
3 title: Input group
4 description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
5 group: components
6 toc: true
7 ---
8
9 ## Basic example
10
11 Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `<label>`s outside the input group.
12
13 {% capture example %}
14 <div class="input-group mb-3">
15   <div class="input-group-prepend">
16     <span class="input-group-text" id="basic-addon1">@</span>
17   </div>
18   <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
19 </div>
20
21 <div class="input-group mb-3">
22   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
23   <div class="input-group-append">
24     <span class="input-group-text" id="basic-addon2">@example.com</span>
25   </div>
26 </div>
27
28 <label for="basic-url">Your vanity URL</label>
29 <div class="input-group mb-3">
30   <div class="input-group-prepend">
31     <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
32   </div>
33   <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
34 </div>
35
36 <div class="input-group mb-3">
37   <div class="input-group-prepend">
38     <span class="input-group-text">$</span>
39   </div>
40   <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
41   <div class="input-group-append">
42     <span class="input-group-text">.00</span>
43   </div>
44 </div>
45
46 <div class="input-group">
47   <div class="input-group-prepend">
48     <span class="input-group-text">With textarea</span>
49   </div>
50   <textarea class="form-control" aria-label="With textarea"></textarea>
51 </div>
52 {% endcapture %}
53 {% include example.html content=example %}
54
55 ## Wrapping
56
57 Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.
58
59 {% capture example %}
60 <div class="input-group flex-nowrap">
61   <div class="input-group-prepend">
62     <span class="input-group-text" id="addon-wrapping">@</span>
63   </div>
64   <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
65 </div>
66 {% endcapture %}
67 {% include example.html content=example %}
68
69 ## Sizing
70
71 Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
72
73 **Sizing on the individual input group elements isn't supported.**
74
75 {% capture example %}
76 <div class="input-group input-group-sm mb-3">
77   <div class="input-group-prepend">
78     <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
79   </div>
80   <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
81 </div>
82
83 <div class="input-group mb-3">
84   <div class="input-group-prepend">
85     <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
86   </div>
87   <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
88 </div>
89
90 <div class="input-group input-group-lg">
91   <div class="input-group-prepend">
92     <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
93   </div>
94   <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
95 </div>
96 {% endcapture %}
97 {% include example.html content=example %}
98
99 ## Checkboxes and radios
100
101 Place any checkbox or radio option within an input group's addon instead of text.
102
103 {% capture example %}
104 <div class="input-group mb-3">
105   <div class="input-group-prepend">
106     <div class="input-group-text">
107       <input type="checkbox" aria-label="Checkbox for following text input">
108     </div>
109   </div>
110   <input type="text" class="form-control" aria-label="Text input with checkbox">
111 </div>
112
113 <div class="input-group">
114   <div class="input-group-prepend">
115     <div class="input-group-text">
116       <input type="radio" aria-label="Radio button for following text input">
117     </div>
118   </div>
119   <input type="text" class="form-control" aria-label="Text input with radio button">
120 </div>
121 {% endcapture %}
122 {% include example.html content=example %}
123
124 ## Multiple inputs
125
126 While multiple `<input>`s are supported visually, validation styles are only available for input groups with a single `<input>`.
127
128 {% capture example %}
129 <div class="input-group">
130   <div class="input-group-prepend">
131     <span class="input-group-text">First and last name</span>
132   </div>
133   <input type="text" aria-label="First name" class="form-control">
134   <input type="text" aria-label="Last name" class="form-control">
135 </div>
136 {% endcapture %}
137 {% include example.html content=example %}
138
139 ## Multiple addons
140
141 Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
142
143 {% capture example %}
144 <div class="input-group mb-3">
145   <div class="input-group-prepend">
146     <span class="input-group-text">$</span>
147     <span class="input-group-text">0.00</span>
148   </div>
149   <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
150 </div>
151
152 <div class="input-group">
153   <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
154   <div class="input-group-append">
155     <span class="input-group-text">$</span>
156     <span class="input-group-text">0.00</span>
157   </div>
158 </div>
159 {% endcapture %}
160 {% include example.html content=example %}
161
162 ## Button addons
163
164 {% capture example %}
165 <div class="input-group mb-3">
166   <div class="input-group-prepend">
167     <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
168   </div>
169   <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
170 </div>
171
172 <div class="input-group mb-3">
173   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
174   <div class="input-group-append">
175     <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
176   </div>
177 </div>
178
179 <div class="input-group mb-3">
180   <div class="input-group-prepend" id="button-addon3">
181     <button class="btn btn-outline-secondary" type="button">Button</button>
182     <button class="btn btn-outline-secondary" type="button">Button</button>
183   </div>
184   <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3">
185 </div>
186
187 <div class="input-group">
188   <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
189   <div class="input-group-append" id="button-addon4">
190     <button class="btn btn-outline-secondary" type="button">Button</button>
191     <button class="btn btn-outline-secondary" type="button">Button</button>
192   </div>
193 </div>
194 {% endcapture %}
195 {% include example.html content=example %}
196
197 ## Buttons with dropdowns
198
199 {% capture example %}
200 <div class="input-group mb-3">
201   <div class="input-group-prepend">
202     <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
203     <div class="dropdown-menu">
204       <a class="dropdown-item" href="#">Action</a>
205       <a class="dropdown-item" href="#">Another action</a>
206       <a class="dropdown-item" href="#">Something else here</a>
207       <div role="separator" class="dropdown-divider"></div>
208       <a class="dropdown-item" href="#">Separated link</a>
209     </div>
210   </div>
211   <input type="text" class="form-control" aria-label="Text input with dropdown button">
212 </div>
213
214 <div class="input-group">
215   <input type="text" class="form-control" aria-label="Text input with dropdown button">
216   <div class="input-group-append">
217     <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
218     <div class="dropdown-menu">
219       <a class="dropdown-item" href="#">Action</a>
220       <a class="dropdown-item" href="#">Another action</a>
221       <a class="dropdown-item" href="#">Something else here</a>
222       <div role="separator" class="dropdown-divider"></div>
223       <a class="dropdown-item" href="#">Separated link</a>
224     </div>
225   </div>
226 </div>
227 {% endcapture %}
228 {% include example.html content=example %}
229
230 ## Segmented buttons
231
232 {% capture example %}
233 <div class="input-group mb-3">
234   <div class="input-group-prepend">
235     <button type="button" class="btn btn-outline-secondary">Action</button>
236     <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
237       <span class="sr-only">Toggle Dropdown</span>
238     </button>
239     <div class="dropdown-menu">
240       <a class="dropdown-item" href="#">Action</a>
241       <a class="dropdown-item" href="#">Another action</a>
242       <a class="dropdown-item" href="#">Something else here</a>
243       <div role="separator" class="dropdown-divider"></div>
244       <a class="dropdown-item" href="#">Separated link</a>
245     </div>
246   </div>
247   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
248 </div>
249
250 <div class="input-group">
251   <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
252   <div class="input-group-append">
253     <button type="button" class="btn btn-outline-secondary">Action</button>
254     <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
255       <span class="sr-only">Toggle Dropdown</span>
256     </button>
257     <div class="dropdown-menu">
258       <a class="dropdown-item" href="#">Action</a>
259       <a class="dropdown-item" href="#">Another action</a>
260       <a class="dropdown-item" href="#">Something else here</a>
261       <div role="separator" class="dropdown-divider"></div>
262       <a class="dropdown-item" href="#">Separated link</a>
263     </div>
264   </div>
265 </div>
266 {% endcapture %}
267 {% include example.html content=example %}
268
269 ## Custom forms
270
271 Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
272
273 ### Custom select
274
275 {% capture example %}
276 <div class="input-group mb-3">
277   <div class="input-group-prepend">
278     <label class="input-group-text" for="inputGroupSelect01">Options</label>
279   </div>
280   <select class="custom-select" id="inputGroupSelect01">
281     <option selected>Choose...</option>
282     <option value="1">One</option>
283     <option value="2">Two</option>
284     <option value="3">Three</option>
285   </select>
286 </div>
287
288 <div class="input-group mb-3">
289   <select class="custom-select" id="inputGroupSelect02">
290     <option selected>Choose...</option>
291     <option value="1">One</option>
292     <option value="2">Two</option>
293     <option value="3">Three</option>
294   </select>
295   <div class="input-group-append">
296     <label class="input-group-text" for="inputGroupSelect02">Options</label>
297   </div>
298 </div>
299
300 <div class="input-group mb-3">
301   <div class="input-group-prepend">
302     <button class="btn btn-outline-secondary" type="button">Button</button>
303   </div>
304   <select class="custom-select" id="inputGroupSelect03" aria-label="Example select with button addon">
305     <option selected>Choose...</option>
306     <option value="1">One</option>
307     <option value="2">Two</option>
308     <option value="3">Three</option>
309   </select>
310 </div>
311
312 <div class="input-group">
313   <select class="custom-select" id="inputGroupSelect04" aria-label="Example select with button addon">
314     <option selected>Choose...</option>
315     <option value="1">One</option>
316     <option value="2">Two</option>
317     <option value="3">Three</option>
318   </select>
319   <div class="input-group-append">
320     <button class="btn btn-outline-secondary" type="button">Button</button>
321   </div>
322 </div>
323 {% endcapture %}
324 {% include example.html content=example %}
325
326 ### Custom file input
327
328 {% capture example %}
329 <div class="input-group mb-3">
330   <div class="input-group-prepend">
331     <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
332   </div>
333   <div class="custom-file">
334     <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
335     <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
336   </div>
337 </div>
338
339 <div class="input-group mb-3">
340   <div class="custom-file">
341     <input type="file" class="custom-file-input" id="inputGroupFile02">
342     <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
343   </div>
344   <div class="input-group-append">
345     <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
346   </div>
347 </div>
348
349 <div class="input-group mb-3">
350   <div class="input-group-prepend">
351     <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
352   </div>
353   <div class="custom-file">
354     <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
355     <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
356   </div>
357 </div>
358
359 <div class="input-group">
360   <div class="custom-file">
361     <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
362     <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
363   </div>
364   <div class="input-group-append">
365     <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
366   </div>
367 </div>
368 {% endcapture %}
369 {% include example.html content=example %}
370
371 ## Accessibility
372
373 Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
374
375 The exact technique to be used (`<label>` elements hidden using the `.sr-only` class, or use of the `aria-label` and `aria-labelledby` attributes, possibly in combination with `aria-describedby`) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.