mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-29 23:09:05 +02:00
Code Issues Releases Wiki Activity

Merge branch 'input-group-custom-forms' into v4-dev

Browse Source
This commit is contained in:
Mark Otto
2017-10-22 19:39:47 -07:00
parent 6ef998628d 2d0399e4ea
commit 2f90be3150
2 changed files with 122 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
docs/4.0/components/input-group.md
View File

@@ -1,11 +1,13 @@
---
layout: docs
title: Input group
description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
group: components
toc: true
---
## Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group** and `<label>`s must come outside the input group.
@@ -106,7 +108,6 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve
</div>
{% endexample %}
## Button addons
Buttons in input groups must wrapped in a `.input-group-btn` for proper alignment and sizing. This is required due to default browser styles that cannot be overridden.
@@ -230,6 +231,98 @@ Buttons in input groups must wrapped in a `.input-group-btn` for proper alignmen
</div>
{% endexample %}
## Custom forms
Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.
### Custom select
{% example html %}
<div class="input-group mb-3">
<label class="input-group-addon" for="inputGroupSelect01">Options</label>
<select class="custom-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group mb-3">
<select class="custom-select" id="inputGroupSelect02">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="input-group-addon" for="inputGroupSelect02">Options</label>
</div>
<div class="input-group mb-3">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Button</button>
</span>
<select class="custom-select" id="inputGroupSelect03">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group">
<select class="custom-select" id="inputGroupSelect04">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Button</button>
</span>
</div>
{% endexample %}
### Custom file input
{% example html %}
<div class="input-group mb-3">
<span class="input-group-addon">Upload</span>
<label class="custom-file">
<input type="file" id="inputGroupFile01" class="custom-file-input" required>
<span class="custom-file-control"></span>
</label>
</div>
<div class="input-group mb-3">
<label class="custom-file">
<input type="file" id="inputGroupFile02" class="custom-file-input" required>
<span class="custom-file-control"></span>
</label>
<span class="input-group-addon" id="">Upload</span>
</div>
<div class="input-group mb-3">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Button</button>
</span>
<label class="custom-file">
<input type="file" id="inputGroupFile03" class="custom-file-input" required>
<span class="custom-file-control"></span>
</label>
</div>
<div class="input-group">
<label class="custom-file">
<input type="file" id="inputGroupFile04" class="custom-file-input" required>
<span class="custom-file-control"></span>
</label>
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Button</button>
</span>
</div>
{% endexample %}
## Accessibility
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.