Input Group

Компонент Input Group предназначен для объединения нескольких элементов ввода в один логический блок. Такой подход позволяет визуально и функционально связать поля ввода, кнопки, селекторы, иконки или другие интерактивные элементы.

В библиотеке Naive UI для этой задачи используется компонент n-input-group, который обеспечивает:

  • единое визуальное оформление нескольких элементов
  • корректное объединение границ компонентов
  • согласованное поведение размеров
  • удобное расположение элементов управления вокруг поля ввода

Input Group часто применяется в интерфейсах поиска, формах фильтрации, панелях ввода данных и сложных формах.

Подключение компонентов

Для использования группы ввода необходимо импортировать соответствующие компоненты из библиотеки:

import { NInput, NInputGroup, NButton } from "naive-ui"

Регистрация компонентов выполняется стандартным способом в Vue:

export default {
  components: {
    NInput,
    NInputGroup,
    NButton
  }
}

Базовое использование

Компонент n-input-group используется как контейнер, внутри которого размещаются элементы управления.

<n-input-group>
  <n-input placeholder="Введите текст" />
  <n-button type="primary">Поиск</n-button>
</n-input-group>

В результате:

  • поле ввода и кнопка объединяются
  • границы между компонентами соединяются
  • элементы выглядят как единый интерфейсный блок

Это позволяет создать компактный и визуально связанный элемент формы.

Принцип объединения элементов

Основная особенность n-input-group заключается в автоматическом объединении границ дочерних компонентов.

Когда несколько элементов помещаются внутрь группы:

  • внутренние границы удаляются
  • внешняя рамка остается общей
  • радиус скругления корректируется

Например:

<n-input-group>
  <n-input />
  <n-input />
</n-input-group>

Результат:

[ input ][ input ]

Без визуального разделения рамками.

Использование префиксных элементов

Input Group часто используется для добавления элементов перед основным полем ввода.

Типичный пример — указание протокола URL.

<n-input-group>
  <n-button>https://</n-button>
  <n-input placeholder="example.com" />
</n-input-group>

Интерфейс:

[ https:// ][ example.com ]

Такой подход делает интерфейс более понятным и структурированным.

Добавление элементов после поля ввода

Компоненты также могут располагаться после основного поля.

Пример — кнопка отправки запроса:

<n-input-group>
  <n-input placeholder="Поиск..." />
  <n-button type="primary">Найти</n-button>
</n-input-group>

Визуальная структура:

[ Поиск... ][ Найти ]

Комбинирование нескольких элементов

Input Group поддерживает объединение нескольких элементов разных типов.

Пример сложной группы:

<n-input-group>
  <n-button>http://</n-button>
  <n-input placeholder="site" />
  <n-select :options="domains" />
</n-input-group>

Пример данных:

const domains = [
  { label: ".com", value: "com" },
  { label: ".org", value: "org" },
  { label: ".net", value: "net" }
]

Интерфейс:

[ http:// ][ site ][ .com ▼ ]

Такой паттерн часто используется при вводе доменных адресов.

Группировка полей ввода

Input Group можно использовать не только для добавления кнопок, но и для объединения нескольких полей ввода.

Пример:

<n-input-group>
  <n-input placeholder="Имя" />
  <n-input placeholder="Фамилия" />
</n-input-group>

Визуально это выглядит как единый компонент с двумя областями ввода.

Этот прием применяется для:

  • ввода диапазонов
  • ввода имени и фамилии
  • ввода частей номера телефона

Пример ввода диапазона значений

<n-input-group>
  <n-input placeholder="От" />
  <n-input placeholder="До" />
</n-input-group>

Используется для:

  • фильтров
  • диапазонов цен
  • диапазонов дат

Использование с компонентом Select

Группа ввода хорошо сочетается с выпадающими списками.

Пример — выбор категории перед поиском.

<n-input-group>
  <n-select :options="categories" />
  <n-input placeholder="Введите запрос" />
</n-input-group>

Данные:

const categories = [
  { label: "Все", value: "all" },
  { label: "Статьи", value: "articles" },
  { label: "Товары", value: "products" }
]

Интерфейс:

[ Все ▼ ][ Поиск... ]

Использование с иконками

Иногда перед полем ввода размещается иконка.

<n-input-group>
  <n-button quaternary>
    <n-icon>
      <SearchOutline />
    </n-icon>
  </n-button>
  <n-input placeholder="Поиск..." />
</n-input-group>

Так создается компактное поле поиска.

Управление размерами

Компоненты внутри n-input-group должны иметь одинаковый размер.

Поддерживаются стандартные размеры:

  • small
  • medium
  • large

Пример:

<n-input-group size="large">
  <n-input />
  <n-button>Отправить</n-button>
</n-input-group>

Размер применяется ко всем элементам группы.

Использование разных типов кнопок

Внутри группы могут использоваться различные типы кнопок.

<n-input-group>
  <n-input placeholder="Email" />
  <n-button type="primary">Подписаться</n-button>
</n-input-group>

Поддерживаются стандартные типы:

  • default
  • primary
  • success
  • warning
  • error

Комбинирование с Number Input

Группа ввода подходит для числовых значений.

Пример:

<n-input-group>
  <n-input-number />
  <n-button>Добавить</n-button>
</n-input-group>

Используется для:

  • количества товаров
  • параметров фильтра
  • настройки значений

Использование с Date Picker

Группа может объединять поле даты и кнопку.

<n-input-group>
  <n-date-picker type="date" />
  <n-button>Применить</n-button>
</n-input-group>

Это часто используется в панелях фильтрации.

Работа с адаптивностью

Input Group корректно работает в адаптивных интерфейсах.

Однако при узкой ширине контейнера следует учитывать:

  • минимальную ширину кнопок
  • минимальную ширину select
  • перенос группы на новую строку

Иногда применяется обертка:

.group-container {
  max-width: 400px;
}

Ограничения использования

Несмотря на универсальность, существуют рекомендации:

1. Не перегружать группу

Плохой пример:

[input][button][select][button][icon]

Интерфейс становится сложным.

Оптимально использовать 2–3 элемента.

2. Использовать логически связанные элементы

Хорошие примеры:

  • поле поиска + кнопка
  • цена от/до
  • протокол + домен
  • категория + поиск

3. Соблюдать одинаковые размеры

Компоненты разных размеров нарушают внешний вид группы.

Внутренний принцип работы

Компонент n-input-group работает через:

  • flex-контейнер
  • управление border
  • управление border-radius

Основные стили:

display: inline-flex

Каждый дочерний элемент получает модифицированные стили:

  • убирается радиус у внутренних элементов
  • объединяются границы

Практический пример: поисковая панель

<n-input-group>
  <n-select
    :options="categories"
    style="width: 140px"
  />
  <n-input
    placeholder="Поиск товаров"
  />
  <n-button type="primary">
    Найти
  </n-button>
</n-input-group>

Такой интерфейс широко используется в интернет-магазинах.

Практический пример: ввод URL

<n-input-group>
  <n-select :options="protocols" />
  <n-input placeholder="example.com" />
  <n-button>Открыть</n-button>
</n-input-group>

Данные:

const protocols = [
  { label: "http://", value: "http" },
  { label: "https://", value: "https" }
]

Практический пример: диапазон цены

<n-input-group>
  <n-input-number placeholder="Мин" />
  <n-input-number placeholder="Макс" />
  <n-button type="primary">
    Применить
  </n-button>
</n-input-group>

Используется в системах фильтрации товаров.

Основные преимущества Input Group

1. Компактность интерфейса

Несколько элементов объединяются в один визуальный блок.

2. Улучшение UX

Связанные элементы воспринимаются как единая операция.

3. Повышение читаемости формы

Логические группы становятся очевидными.

4. Упрощение верстки

Не требуется вручную настраивать стили границ и отступов.

Рекомендации по проектированию интерфейсов

При использовании Input Group полезно придерживаться нескольких принципов.

Минимальная длина группы

Чем короче группа — тем лучше воспринимается интерфейс.

Ясная логическая связь

Каждый элемент должен напрямую относиться к операции ввода.

Контроль ширины элементов

Select и кнопки лучше ограничивать фиксированной шириной.

Избегание вложенных групп

n-input-group не предназначен для вложенности.

Когда использовать Input Group

Компонент особенно полезен в следующих ситуациях:

  • поле поиска + кнопка
  • фильтрация данных
  • ввод диапазонов
  • ввод URL
  • комбинированные формы ввода

Использование n-input-group позволяет строить компактные и удобные интерфейсы, где связанные элементы управления объединяются в единый функциональный блок.

Оглавление