Cмотреть на GitHub

Группа ввода

Легко расширяйте элементы управления формой, добавляя текст, кнопки или группы кнопок, настраиваемых меню выбора и пользовательской закгруки файлов.

Базовые примеры

Разместите одно «дополнение» или кнопку слева или справа от формы ввода. Вы можете также разместить их с обеих сторон. Не забудьте разместить теги <label> вне группы ввода.

@
@example.com
https://example.com/users/
$
.00
С текстовым полем 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Имя пользователя" aria-label="Имя пользователя" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Имя пользователя получателя" aria-label="Имя пользователя получателя" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

<label for="basic-url">Ваш тщеславный URL</label>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" aria-label="Сумма (с точностью до доллара)">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">С текстовым полем</span>
  </div>
  <textarea class="form-control" aria-label="С текстовым полем"></textarea>
</div>

Обертка

Обтекание групп ввода по умолчанию с помощью flex-wrap: wrap, чтобы обеспечить возможность проверки пользовательских полей формы в группе ввода. Вы можете отключить это с помощью .flex-nowrap.

@ 
<div class="input-group flex-nowrap">
  <div class="input-group-prepend">
    <span class="input-group-text" id="addon-wrapping">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Имя пользователя" aria-label="Имя пользователя" aria-describedby="addon-wrapping">
</div>

Размеры

Добавьте в саму группу .input-group классы относительных размеров форм и содержимое группы будет автоматически изменять размер – т.е. не будет необходимости повторять классы размера органов контроля формы в каждом элементе.

Определение размера отдельных элементов входной группы не поддерживается.

Маленький
По умолчанию
Большой 
<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Маленький</span>
  </div>
  <input type="text" class="form-control" aria-label="Пример размера поля ввода" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">По умолчанию</span>
  </div>
  <input type="text" class="form-control" aria-label="Пример размера поля ввода" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Большой</span>
  </div>
  <input type="text" class="form-control" aria-label="Пример размера поля ввода" aria-describedby="inputGroup-sizing-lg">
</div>

«Дополнения» чекбоксов и радиокнопок

Разместите какой-либо чекбокс или радиокнопоку внутри дополнения группы ввода вместо текста.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" aria-label="Флажок для следующего ввода текста">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Ввод текста с флажком">
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio" aria-label="Радиокнопка для следующего ввода текста">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Ввод текста с переключателем">
</div>

Множественный ввод

Хотя несколько <input> поддерживаются визуально, стили проверки доступны только для групп ввода с одним <input>.

Имя и фамилия 
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Имя и фамилия</span>
  </div>
  <input type="text" aria-label="Имя" class="form-control">
  <input type="text" aria-label="Фамилия" class="form-control">
</div>

Множественные «дополнения»

Поддерживаются множественные «дополнения», которые можно миксовать с версиями ввода в виде чекбоксов и «радио».

$ 0.00
$ 0.00 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <input type="text" class="form-control" aria-label="Сумма в долларах (с точкой и двумя десятичными знаками)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Сумма в долларах (с точкой и двумя десятичными знаками)">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>

«Дополнения» кнопок

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="button-addon1">Кнопка</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Пример текста с надстройкой кнопки" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Имя пользователя получателя" aria-label="Имя пользователя получателя" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2">Кнопка</button>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend" id="button-addon3">
    <button class="btn btn-outline-secondary" type="button">Кнопка</button>
    <button class="btn btn-outline-secondary" type="button">Кнопка</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Пример текста с двумя кнопками" aria-describedby="button-addon3">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Имя пользователя получателя" aria-label="Имя пользователя получателя с двумя кнопками дополнения" aria-describedby="button-addon4">
  <div class="input-group-append" id="button-addon4">
    <button class="btn btn-outline-secondary" type="button">Кнопка</button>
    <button class="btn btn-outline-secondary" type="button">Кнопка</button>
  </div>
</div>

Кнопки с выпадающими элементами

Действие Другое действие Что-то еще здесь Отделенная ссылка
Действие Другое действие Что-то еще здесь Отделенная ссылка 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Выпадающий список</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Действие</a>
      <a class="dropdown-item" href="#">Другое действие</a>
      <a class="dropdown-item" href="#">Что-то еще здесь</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Отделенная ссылка</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Ввод текста с помощью раскрывающейся кнопки">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Ввод текста с помощью раскрывающейся кнопки">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Выпадающий список</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Действие</a>
      <a class="dropdown-item" href="#">Другое действие</a>
      <a class="dropdown-item" href="#">Что-то еще здесь</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Отделенная ссылка</a>
    </div>
  </div>
</div>

Сегментированные кнопки

Действие Другое действие Что-то еще здесь Отделенная ссылка
Действие Другое действие Что-то еще здесь Отделенная ссылка 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary">Действие</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Переключатель раскрывающегося списка</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Действие</a>
      <a class="dropdown-item" href="#">Другое действие</a>
      <a class="dropdown-item" href="#">Что-то еще здесь</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Отделенная ссылка</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Ввод текста с помощью кнопки сегментированного раскрывающегося списка">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Ввод текста с помощью кнопки сегментированного раскрывающегося списка">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary">Действие</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Переключатель раскрывающегося списка</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Действие</a>
      <a class="dropdown-item" href="#">Другое действие</a>
      <a class="dropdown-item" href="#">Что-то еще здесь</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Отделенная ссылка</a>
    </div>
  </div>
</div>

Пользовательские формы

Группы ввода включают поддержку пользовательских выборок и пользовательских загрузок файлов. Стандартные версии браузера для них не поддерживаются.

Пользовательский выбор

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Параметры</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>Выбрать...</option>
    <option value="1">Один</option>
    <option value="2">Два</option>
    <option value="3">Три</option>
  </select>
</div>

<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect02">
    <option selected>Выбрать...</option>
    <option value="1">Один</option>
    <option value="2">Два</option>
    <option value="3">Три</option>
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="inputGroupSelect02">Параметры</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Кнопка</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03" aria-label="Пример выбора с помощью надстройки кнопки">
    <option selected>Выбрать...</option>
    <option value="1">Один</option>
    <option value="2">Два</option>
    <option value="3">Три</option>
  </select>
</div>

<div class="input-group">
  <select class="custom-select" id="inputGroupSelect04" aria-label="Пример выбора с помощью надстройки кнопки">
    <option selected>Выбрать...</option>
    <option value="1">Один</option>
    <option value="2">Два</option>
    <option value="3">Три</option>
  </select>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Кнопка</button>
  </div>
</div>

Пользовательская загрузка файла

Загрузка
Загрузка 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Загрузка</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Выбрать файл</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile02">
    <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Выбрать файл</label>
  </div>
  <div class="input-group-append">
    <span class="input-group-text" id="inputGroupFileAddon02">Загрузка</span>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Кнопка</button>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
    <label class="custom-file-label" for="inputGroupFile03">Выбрать файл</label>
  </div>
</div>

<div class="input-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
    <label class="custom-file-label" for="inputGroupFile04">Выбрать файл</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Кнопка</button>
  </div>
</div>

Доступность

Убедитесь, что у всех элементов управления формы есть подходящие доступные имена, чтобы их назначение можно было донести до пользователей вспомогательных технологий. Самый простой способ добиться этого - использовать элемент <label> или - в случае кнопок - включить достаточно описательный текст как часть содержимого <button>...</button>.

В ситуациях, когда невозможно включить видимую метку <label> или соответствующее текстовое содержимое, есть альтернативные способы предоставления доступного имени, например:

  • Элементы <label> скрыты с использованием класса .sr-only
  • Указание на существующий элемент, который может действовать как метка, используя aria-labelledby
  • Предоставление атрибута title
  • Явная установка доступного имени для элемента с помощью aria-label

Если ни один из них не присутствует, вспомогательные технологии могут прибегнуть к использованию атрибута placeholder в качестве запасного варианта для доступного имени в элементах <input> и <textarea>. Примеры в этом разделе представляют несколько предлагаемых подходов для конкретных случаев.

Хотя использование визуально скрытого содержимого (.sr-only, aria-label и даже содержимого placeholder, которое исчезает, когда в поле формы появляется содержимое) принесет пользу пользователям вспомогательных технологий, отсутствие видимого текста метки может по-прежнему проблематично для некоторых пользователей. Как правило, лучше всего подходят видимые метки в той или иной форме как с точки зрения доступности, так и удобства использования.