Bootstrap 5 Input group (группы ввода)

В современном веб-дизайне важно не только предоставить пользователю функциональный и красивый интерфейс, но и обеспечить удобство и интуитивность использования форм. Bootstrap 5, как один из лидирующих фронтенд-фреймворков, предлагает разработчикам удобные инструменты для создания адаптивных и стильных форм. Одним из таких инструментов являются группы ввода, которые позволяют объединять текстовые поля с лейблами, кнопками и другими элементами, делая формы более функциональными и эстетически привлекательными. В этой статье-документации мы рассмотрим основные и продвинутые способы использования групп ввода в Bootstrap 5, которые помогут вам улучшить взаимодействие с пользователем.

Основы групп ввода

Группы ввода (input group) - это компоненты Bootstrap, которые облегчают добавление текста, кнопок или кнопочных групп к текстовым полям. Они особенно полезны, когда необходимо предоставить пользователю дополнительный контекст или функциональность для поля ввода.

Примеры использования

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

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

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

<div class="mb-3">
  <label for="basic-url" class="form-label">Ваш URL-адрес для тщеславия</label>
  <div class="input-group">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3 basic-addon4">
  </div>
  <div class="form-text" id="basic-addon4">Пример текста справки выходит за пределы группы ввода.</div>
</div>

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-text">.00</span>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Имя пользователя" aria-label="Username">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Сервер" aria-label="Server">
</div>

<div class="input-group">
  <span class="input-group-text">С текстовой областью</span>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

Результат:

@example.com

Ваш URL-адрес для тщеславия

https://example.com/users/

Пример текста справки выходит за пределы группы ввода.

$ .00

С текстовой областью

Перенос

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

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

Результат:

Определение размера

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

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

<div class="input-group input-group-sm mb-3">
  <span class="input-group-text" id="inputGroup-sizing-sm">Небольшой</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <span class="input-group-text" id="inputGroup-sizing-default">По умолчанию</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg">
  <span class="input-group-text" id="inputGroup-sizing-lg">Большой</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>

Результат:

Небольшой

По умолчанию

Большой

Расширенное использование групп ввода в Bootstrap 5

Флажки и переключатели

Установите любой флажок или опцию переключения в дополнение к группе ввода вместо текста. Мы рекомендуем добавлять .mt-0 в .form-check-input, когда рядом с вводом нет видимого текста.

<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input">
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input">
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>

Результат:

Несколько входных данных

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

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

Результат:

Имя и фамилия

Несколько дополнений

Поддерживается несколько дополнений, которые могут быть объединены с версиями checkbox и radio input.

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
</div>

Результат:

$ 0.00

Дополнения к кнопкам

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button" id="button-addon1">Кнопка</button>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Кнопка</button>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Кнопка</button>
  <button class="btn btn-outline-secondary" type="button">Кнопка</button>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Имя пользователя получателя" aria-label="Recipient's username with two button addons">
  <button class="btn btn-outline-secondary" type="button">Кнопка</button>
  <button class="btn btn-outline-secondary" type="button">Кнопка</button>
</div>

Результат:

Кнопки с выпадающими списками

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Выпадающий список</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Выпадающий список</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

<div class="input-group">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Выпадающий список</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action before</a></li>
    <li><a class="dropdown-item" href="#">Another action before</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Выпадающий список</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Результат:

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

<div class="input-group mb-3">
  <button type="button" class="btn btn-outline-secondary">Action</button>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Переключить выпадающий список</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <button type="button" class="btn btn-outline-secondary">Action</button>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Переключить выпадающий список</span>
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

Результат:

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

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

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

<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupSelect01">Options</label>
  <select class="form-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="form-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-text" for="inputGroupSelect02">Options</label>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Button</button>
  <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
    <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="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <button class="btn btn-outline-secondary" type="button">Button</button>
</div>

Результат:

Options

Пользовательский ввод файла

<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupFile01">Upload</label>
  <input type="file" class="form-control" id="inputGroupFile01">
</div>

<div class="input-group mb-3">
  <input type="file" class="form-control" id="inputGroupFile02">
  <label class="input-group-text" for="inputGroupFile02">Upload</label>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
  <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
</div>

<div class="input-group">
  <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>

Результат:

Upload

Используя эти продвинутые техники, вы можете значительно расширить возможности стандартных групп ввода Bootstrap 5, делая их более многофункциональными и адаптивными к нуждам пользователей.

Кастомизация стилей

С помощью CSS вы можете кастомизировать стили групп ввода, чтобы они лучше соответствовали дизайну вашего сайта.

Пример кастомизации стилей:

.custom-input-group .input-group-text {
  background-color: #ff5722;
  color: white;
}

.custom-input-group .form-control {
  border-color: #ff5722;
}

<div class="input-group custom-input-group mb-3">
  <span class="input-group-text" id="basic-addon3">Custom Style</span>
  <input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon3">
</div>

Результат:

Custom Style

CSS

Переменные Sass

scss/_variables.scss

$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;

Заключение

Группы ввода в Bootstrap 5 открывают перед разработчиками широкие возможности для создания эффективных и удобных форм. От простых текстовых полей с добавленными иконками до сложных конструкций с выпадающими списками, чекбоксами и радиокнопками — все это доступно в арсенале Bootstrap 5. Кастомизация стилей позволяет дополнительно адаптировать элементы под любой дизайн сайта. Надеемся, что представленные в этой статье примеры и техники будут полезны в вашей работе и помогут создать максимально комфортные и функциональные интерфейсы для пользователей.

На этой странице