Группа полей ввода
Легко расширяйте элементы управления формой, добавляя текст, кнопки или группы кнопок с обеих сторон текстового ввода, настраиваемого выбора файлов.
На этой странице
Базовый пример
Поместите одну надстройку или кнопку с обеих сторон от ввода. Вы также можете разместить его по обе стороны от ввода. Не забудьте разместить теги <label> вне группы ввода.
@
@example.com
https://example.com/users/
Пример текста справки выходит за пределы группы ввода.
$.00
@
С текстовым полем
<divclass="input-group mb-3"><spanclass="input-group-text"id="basic-addon1">@</span><inputtype="text"class="form-control"placeholder="Имя пользователя"aria-label="Имя пользователя"aria-describedby="basic-addon1"></div><divclass="input-group mb-3"><inputtype="text"class="form-control"placeholder="Имя пользователя получателя"aria-label="Имя пользователя получателя"aria-describedby="basic-addon2"><spanclass="input-group-text"id="basic-addon2">@example.com</span></div><divclass="mb-3"><labelfor="basic-url"class="form-label">Ваш URL-адрес</label><divclass="input-group"><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="form-text">Пример текста справки выходит за пределы группы ввода.</div></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="Имя пользователя"aria-label="Имя пользователя"><spanclass="input-group-text">@</span><inputtype="text"class="form-control"placeholder="Сервер"aria-label="Сервер"></div><divclass="input-group"><spanclass="input-group-text">С текстовым полем</span><textareaclass="form-control"aria-label="С текстовым полем"></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="Имя пользователя"aria-label="Имя пользователя"aria-describedby="addon-wrapping"></div>Размеры
Добавьте классы относительного изменения размера формы в саму .input-group, и содержимое внутри автоматически изменит размер - нет необходимости повторять классы размеров элемента управления формы для каждого элемента.
Изменение размеров отдельных элементов группы ввода не поддерживается.
Маленький
По умолчанию
Большой
<divclass="input-group input-group-sm mb-3"><spanclass="input-group-text"id="inputGroup-sizing-sm">Маленький</span><inputtype="text"class="form-control"aria-label="Пример размера поля ввода"aria-describedby="inputGroup-sizing-sm"></div><divclass="input-group mb-3"><spanclass="input-group-text"id="inputGroup-sizing-default">По умолчанию</span><inputtype="text"class="form-control"aria-label="Пример размера поля ввода"aria-describedby="inputGroup-sizing-default"></div><divclass="input-group input-group-lg"><spanclass="input-group-text"id="inputGroup-sizing-lg">Большой</span><inputtype="text"class="form-control"aria-label="Пример размера поля ввода"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="Флажок для следующего ввода текста"></div><inputtype="text"class="form-control"aria-label="Ввод текста с флажком"></div><divclass="input-group"><divclass="input-group-text"><inputclass="form-check-input mt-0"type="radio"value=""aria-label="Радиокнопка для следующего ввода текста"></div><inputtype="text"class="form-control"aria-label="Ввод текста с переключателем"></div>Множественные поля ввода
Хотя визуально поддерживаются несколько <input>, стили проверки доступны только для групп ввода с одним <input>.
Имя и фамилия
<divclass="input-group"><spanclass="input-group-text">Имя и фамилия</span><inputtype="text"aria-label="Имя"class="form-control"><inputtype="text"aria-label="Фамилия"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="Сумма в рублях (с точкой и двумя десятичными знаками)"></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="Сумма в рублях (с точкой и двумя десятичными знаками)"><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><inputtype="text"class="form-control"placeholder=""aria-label="Пример текста с надстройкой кнопкой"aria-describedby="button-addon1"></div><divclass="input-group mb-3"><inputtype="text"class="form-control"placeholder="Имя пользователя получателя"aria-label="Имя пользователя получателя"aria-describedby="button-addon2"><buttonclass="btn btn-outline-secondary"type="button"id="button-addon2">Кнопка</button></div><divclass="input-group mb-3"><buttonclass="btn btn-outline-secondary"type="button">Кнопка</button><buttonclass="btn btn-outline-secondary"type="button">Кнопка</button><inputtype="text"class="form-control"placeholder=""aria-label="Пример текста с двумя кнопками"></div><divclass="input-group"><inputtype="text"class="form-control"placeholder="Имя пользователя получателя"aria-label="Имя пользователя получателя with two button addons"><buttonclass="btn btn-outline-secondary"type="button">Кнопка</button><buttonclass="btn btn-outline-secondary"type="button">Кнопка</button></div>Кнопки с выпадающими элементами
<divclass="input-group mb-3"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-bs-toggle="dropdown"aria-expanded="false">Выпадающий список</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Отдельная ссылка</a></li></ul><inputtype="text"class="form-control"aria-label="Ввод текста с помощью раскрывающейся кнопки"></div><divclass="input-group mb-3"><inputtype="text"class="form-control"aria-label="Ввод текста с помощью раскрывающейся кнопки"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-bs-toggle="dropdown"aria-expanded="false">Выпадающий список</button><ulclass="dropdown-menu dropdown-menu-end"><li><aclass="dropdown-item"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Отдельная ссылка</a></li></ul></div><divclass="input-group"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-bs-toggle="dropdown"aria-expanded="false">Выпадающий список</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Действия до</a></li><li><aclass="dropdown-item"href="#">Другое действие до</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Отдельная ссылка</a></li></ul><inputtype="text"class="form-control"aria-label="Ввод текста с помощью 2-х раскрывающихся кнопок"><buttonclass="btn btn-outline-secondary dropdown-toggle"type="button"data-bs-toggle="dropdown"aria-expanded="false">Выпадающий список</button><ulclass="dropdown-menu dropdown-menu-end"><li><aclass="dropdown-item"href="#">Действие</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Отдельная ссылка</a></li></ul></div>Сегментированные кнопки
<divclass="input-group mb-3"><buttontype="button"class="btn btn-outline-secondary">Действия</button><buttontype="button"class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"data-bs-toggle="dropdown"aria-expanded="false"><spanclass="visually-hidden">Переключатель выпадающий список</span></button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Действия</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Отдельная ссылка</a></li></ul><inputtype="text"class="form-control"aria-label="Ввод текста с помощью кнопки сегментированного раскрывающегося списка"></div><divclass="input-group"><inputtype="text"class="form-control"aria-label="Ввод текста с помощью кнопки сегментированного раскрывающегося списка"><buttontype="button"class="btn btn-outline-secondary">Действия</button><buttontype="button"class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"data-bs-toggle="dropdown"aria-expanded="false"><spanclass="visually-hidden">Переключатель выпадающий список</span></button><ulclass="dropdown-menu dropdown-menu-end"><li><aclass="dropdown-item"href="#">Действия</a></li><li><aclass="dropdown-item"href="#">Другое действие</a></li><li><aclass="dropdown-item"href="#">Что-то еще здесь</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Отдельная ссылка</a></li></ul></div>Пользовательские формы
Группы ввода включают поддержку пользовательских выборок и пользовательских загрузок файлов. Стандартные версии браузера для них не поддерживаются.
Пользовательский выбор
<divclass="input-group mb-3"><labelclass="input-group-text"for="inputGroupSelect01">Параметры</label><selectclass="form-select"id="inputGroupSelect01"><optionselected>Выберите...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select></div><divclass="input-group mb-3"><selectclass="form-select"id="inputGroupSelect02"><optionselected>Выберите...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select><labelclass="input-group-text"for="inputGroupSelect02">Параметры</label></div><divclass="input-group mb-3"><buttonclass="btn btn-outline-secondary"type="button">Кнопка</button><selectclass="form-select"id="inputGroupSelect03"aria-label="Пример элемента выбора с помощью надстройки кнопки"><optionselected>Выберите...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select></div><divclass="input-group"><selectclass="form-select"id="inputGroupSelect04"aria-label="Пример элемента выбора с помощью надстройки кнопки"><optionselected>Выберите...</option><optionvalue="1">Один</option><optionvalue="2">Два</option><optionvalue="3">Три</option></select><buttonclass="btn btn-outline-secondary"type="button">Кнопка</button></div>Пользовательский выбор файла
<divclass="input-group mb-3"><labelclass="input-group-text"for="inputGroupFile01">Загрузка</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">Загрузка</label></div><divclass="input-group mb-3"><buttonclass="btn btn-outline-secondary"type="button"id="inputGroupFileAddon03">Кнопка</button><inputtype="file"class="form-control"id="inputGroupFile03"aria-describedby="inputGroupFileAddon03"aria-label="Загрузка"></div><divclass="input-group"><inputtype="file"class="form-control"id="inputGroupFile04"aria-describedby="inputGroupFileAddon04"aria-label="Загрузка"><buttonclass="btn btn-outline-secondary"type="button"id="inputGroupFileAddon04">Кнопка</button></div>CSS
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:var(--#{$prefix}tertiary-bg);$input-group-addon-border-color:$input-border-color;