Cмотреть на GitHub
Группа полей ввода
Легко расширяйте элементы управления формой, добавляя текст, кнопки или группы кнопок с обеих сторон текстового ввода, настраиваемого выбора файлов.
На этой странице
Базовый пример
Разместите одно «дополнение» или кнопку слева или справа от формы ввода. Вы можете также разместить их с обеих сторон. Мы не поддерживаем создание множественных органов контроля форм в одной группе форм ввода, а элементы <label> должны быть вне этой группы.
@
@example.com
https://example.com/users/
$.00
@
With textarea
<divclass="input-group mb-3"><spanclass="input-group-text"id="basic-addon1">@</span><inputtype="text"class="form-control"placeholder="Username"aria-label="Username"aria-describedby="basic-addon1"></div><divclass="input-group mb-3"><inputtype="text"class="form-control"placeholder="Recipient's username"aria-label="Recipient's username"aria-describedby="basic-addon2"><spanclass="input-group-text"id="basic-addon2">@example.com</span></div><labelfor="basic-url"class="form-label">Your vanity URL</label><divclass="input-group mb-3"><spanclass="input-group-text"id="basic-addon3">https://example.com/users/</span><inputtype="text"class="form-control"id="basic-url"aria-describedby="basic-addon3"></div><divclass="input-group mb-3"><spanclass="input-group-text">$</span><inputtype="text"class="form-control"aria-label="Amount (to the nearest dollar)"><spanclass="input-group-text">.00</span></div><divclass="input-group mb-3"><inputtype="text"class="form-control"placeholder="Username"aria-label="Username"><spanclass="input-group-text">@</span><inputtype="text"class="form-control"placeholder="Server"aria-label="Server"></div><divclass="input-group"><spanclass="input-group-text">With textarea</span><textareaclass="form-control"aria-label="With textarea"></textarea></div>Обертка
Обтекание групп ввода по умолчанию с помощью flex-wrap: wrap, чтобы обеспечить возможность проверки пользовательских полей формы в группе ввода. Вы можете отключить это с помощью .flex-nowrap.
@
<divclass="input-group flex-nowrap"><spanclass="input-group-text"id="addon-wrapping">@</span><inputtype="text"class="form-control"placeholder="Username"aria-label="Username"aria-describedby="addon-wrapping"></div>Размеры
Добавьте в саму группу .input-group классы относительных размеров форм и содержимое группы будет автоматически изменять размер – т.е. не будет необходимости повторять классы размера органов контроля формы в каждом элементе.
Определение размера отдельных элементов входной группы не поддерживается.
Small
Default
Large
<divclass="input-group input-group-sm mb-3"><spanclass="input-group-text"id="inputGroup-sizing-sm">Small</span><inputtype="text"class="form-control"aria-label="Sizing example input"aria-describedby="inputGroup-sizing-sm"></div><divclass="input-group mb-3"><spanclass="input-group-text"id="inputGroup-sizing-default">Default</span><inputtype="text"class="form-control"aria-label="Sizing example input"aria-describedby="inputGroup-sizing-default"></div><divclass="input-group input-group-lg"><spanclass="input-group-text"id="inputGroup-sizing-lg">Large</span><inputtype="text"class="form-control"aria-label="Sizing example input"aria-describedby="inputGroup-sizing-lg"></div>Чекбоксы и радиокнопки
Разместите какой-либо чекбокс или радиокнопка внутри дополнения группы ввода вместо текста. Мы рекомендуем добавлять .mt-0 к .form-check-input, когда рядом с полем ввода нет видимого текста.
<divclass="input-group mb-3"><divclass="input-group-text"><inputclass="form-check-input mt-0"type="checkbox"value=""aria-label="Checkbox for following text input"></div><inputtype="text"class="form-control"aria-label="Text input with checkbox"></div><divclass="input-group"><divclass="input-group-text"><inputclass="form-check-input mt-0"type="radio"value=""aria-label="Radio button for following text input"></div><inputtype="text"class="form-control"aria-label="Text input with radio button"></div>Множественный ввод
Хотя несколько <input> поддерживаются визуально, стили проверки доступны только для групп ввода с одним <input>.
First and last name
<divclass="input-group"><spanclass="input-group-text">First and last name</span><inputtype="text"aria-label="First name"class="form-control"><inputtype="text"aria-label="Last name"class="form-control"></div>Множественные «дополнения»
Поддерживаются множественные «дополнения», которые можно миксовать с версиями ввода в виде чекбоксов и «радио».
$0.00
$0.00
<divclass="input-group mb-3"><spanclass="input-group-text">$</span><spanclass="input-group-text">0.00</span><inputtype="text"class="form-control"aria-label="Dollar amount (with dot and two decimal places)"></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="Dollar amount (with dot and two decimal places)"><spanclass="input-group-text">$</span><spanclass="input-group-text">0.00</span></div>«Дополнения» кнопок
<divclass="input-group mb-3"><buttonclass="btn btn-outline-secondary"type="button"id="button-addon1">Button</button><inputtype="text"class="form-control"placeholder=""aria-label="Example text with button addon"aria-describedby="button-addon1"></div><divclass="input-group mb-3"><inputtype="text"class="form-control"placeholder="Recipient's username"aria-label="Recipient's username"aria-describedby="button-addon2"><buttonclass="btn btn-outline-secondary"type="button"id="button-addon2">Button</button></div><divclass="input-group mb-3"><buttonclass="btn btn-outline-secondary"type="button">Button</button><buttonclass="btn btn-outline-secondary"type="button">Button</button><inputtype="text"class="form-control"placeholder=""aria-label="Example text with two button addons"></div><divclass="input-group"><inputtype="text"class="form-control"placeholder="Recipient's username"aria-label="Recipient's username with two button addons"><buttonclass="btn btn-outline-secondary"type="button">Button</button><buttonclass="btn btn-outline-secondary"type="button">Button</button></div>Кнопки с выпадающими элементами
<divclass="input-group mb-3"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-bs-toggle="dropdown"aria-expanded="false">Dropdown</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul><inputtype="text"class="form-control"aria-label="Text input with dropdown button"></div><divclass="input-group mb-3"><inputtype="text"class="form-control"aria-label="Text input with dropdown button"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-bs-toggle="dropdown"aria-expanded="false">Dropdown</button><ulclass="dropdown-menu dropdown-menu-end"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul></div><divclass="input-group"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-bs-toggle="dropdown"aria-expanded="false">Dropdown</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Action before</a></li><li><aclass="dropdown-item"href="#">Another action before</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul><inputtype="text"class="form-control"aria-label="Text input with 2 dropdown buttons"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-bs-toggle="dropdown"aria-expanded="false">Dropdown</button><ulclass="dropdown-menu dropdown-menu-end"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul></div>Сегментированные кнопки
<divclass="input-group mb-3"><buttontype="button"class="btn btn-outline-secondary">Action</button><buttontype="button"class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"data-bs-toggle="dropdown"aria-expanded="false"><spanclass="visually-hidden">Toggle Dropdown</span></button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul><inputtype="text"class="form-control"aria-label="Text input with segmented dropdown button"></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="Text input with segmented dropdown button"><buttontype="button"class="btn btn-outline-secondary">Action</button><buttontype="button"class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"data-bs-toggle="dropdown"aria-expanded="false"><spanclass="visually-hidden">Toggle Dropdown</span></button><ulclass="dropdown-menu dropdown-menu-end"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul></div>Пользовательские формы
Группы ввода включают поддержку пользовательских выборок и пользовательских загрузок файлов. Стандартные версии браузера для них не поддерживаются.
Пользовательский выбор
<divclass="input-group mb-3"><labelclass="input-group-text"for="inputGroupSelect01">Options</label><selectclass="form-select"id="inputGroupSelect01"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select></div><divclass="input-group mb-3"><selectclass="form-select"id="inputGroupSelect02"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><labelclass="input-group-text"for="inputGroupSelect02">Options</label></div><divclass="input-group mb-3"><buttonclass="btn btn-outline-secondary"type="button">Button</button><selectclass="form-select"id="inputGroupSelect03"aria-label="Example select with button addon"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select></div><divclass="input-group"><selectclass="form-select"id="inputGroupSelect04"aria-label="Example select with button addon"><optionselected>Choose...</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><buttonclass="btn btn-outline-secondary"type="button">Button</button></div>Пользовательский выбор файла
<divclass="input-group mb-3"><labelclass="input-group-text"for="inputGroupFile01">Upload</label><inputtype="file"class="form-control"id="inputGroupFile01"></div><divclass="input-group mb-3"><inputtype="file"class="form-control"id="inputGroupFile02"><labelclass="input-group-text"for="inputGroupFile02">Upload</label></div><divclass="input-group mb-3"><buttonclass="btn btn-outline-secondary"type="button"id="inputGroupFileAddon03">Button</button><inputtype="file"class="form-control"id="inputGroupFile03"aria-describedby="inputGroupFileAddon03"aria-label="Upload"></div><divclass="input-group"><inputtype="file"class="form-control"id="inputGroupFile04"aria-describedby="inputGroupFileAddon04"aria-label="Upload"><buttonclass="btn btn-outline-secondary"type="button"id="inputGroupFileAddon04">Button</button></div>Sass
Переменные
$input-group-addon-padding-y:$input-padding-y;$input-group-addon-padding-x:$input-padding-x;$input-group-addon-font-weight:$input-font-weight;$input-group-addon-color:$input-color;$input-group-addon-bg:$gray-200;$input-group-addon-border-color:$input-border-color;