Группа ввода

input-group

В SIMAI Framework с помощью модификаторовможно группировать элементы форм

По умолчанию

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

@example.com

Ваш URL

https://example.com/users/

₽ .00

С текстовой полем

<div class="flex flex-wrap items-cross-stretch w-full m-bottom-1">
    <span class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-left-1/3 border-left-1" id="basic-addon1">@</span>
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-right-1/3 border-right-1" placeholder="Имя пользователя" aria-label="Имя пользователя" aria-describedby="basic-addon1">
</div>
<div class="flex flex-wrap items-cross-stretch w-full m-bottom-1">
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-left-1/3 border-left-1" placeholder="Имя пользователя получателя"
        aria-label="Имя пользователя получателя" aria-describedby="basic-addon2">
    <span class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-right-1/3 border-right-1" id="basic-addon2">@example.com</span>
</div>
<label for="basic-url" class="inline-block m-bottom-1/3">Ваш URL</label>
<div class="flex flex-wrap items-cross-stretch w-full m-bottom-1">
    <span class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-left-1/3 border-left-1" id="basic-addon3">https://example.com/users/</span>
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-right-1/3 border-right-1" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="flex flex-wrap items-cross-stretch w-full m-bottom-1">
    <span class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-left-1/3 border-left-1">₽</span>
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest" aria-label="Сумма (с точностью до рубля)">
    <span class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-right-1/3 border-right-1">.00</span>
</div>
<div class="flex flex-wrap items-cross-stretch w-full m-bottom-1">
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-left-1/3 border-left-1" placeholder="Имя пользователя" aria-label="Имя пользователя">
    <span class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1">@</span>
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-right-1/3 border-right-1" placeholder="Домен" aria-label="Домен">
</div>
<div class="flex flex-wrap items-cross-stretch w-full">
    <span class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-left-1/3 border-left-1">С текстовой полем</span>
    <textarea class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-right-1/3 border-right-1" aria-label="С текстовой областью"></textarea>
</div>

Размеры

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

Малый

Обычный

Большой

<div class="flex flex-wrap items-cross-stretch w-full m-bottom-1">
    <span class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/3 p-left-1/3 text-1/2 radius-left-1/3 border-left-1" id="inputGroup-sizing-sm">Малый</span>
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/3 p-left-1/3 text-1/2 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-right-1/3 border-right-1" aria-label="Пример поля ввода для разных размеров" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="flex flex-wrap items-cross-stretch w-full m-bottom-1">
    <span class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-left-1/3 border-left-1" id="inputGroup-sizing-default">Обычный</span>
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-right-1/3 border-right-1" aria-label="Пример поля ввода для разных размеров" aria-describedby="inputGroup-sizing-default">
</div>

<div class="flex flex-wrap items-cross-stretch w-full">
    <span class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 text-2 radius-left-1/3 border-left-1" id="inputGroup-sizing-lg">Большой</span>
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 text-2 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-right-1/3 border-right-1" aria-label="Пример поля ввода для разных размеров" aria-describedby="inputGroup-sizing-lg">
</div>

Чекбоксы и радиокнопки

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

<div class="flex flex-wrap items-cross-stretch w-full m-bottom-1">
    <div class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-left-1/3 border-left-1">
        <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-blue" type="checkbox" value="" aria-label="Флажок для последующего ввода текста">
    </div>
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-right-1/3 border-right-1" aria-label="Ввод текста с флажком">
</div>
<div class="flex flex-wrap items-cross-stretch w-full">
    <div class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-left-1/3 border-left-1">
        <input class="m-0 w-b6 h-b6 radius-1/3 border-1 appearance-none t-inherit string-inherit bg-surface-0 border-surface-lowest bg-contain bg-repeat-none bg-center checked:bg-blue checked:b-blue checked:bg-check indeterminate:bg-dash indeterminate:b-blue indeterminate:bg-blue checked:bg-circle radius-full" type="radio" value="" aria-label="Радиокнопка для последующего ввода текста">
    </div>
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-right-1/3 border-right-1" aria-label="Ввод текста с радикнопкой">
</div>

Множественные поля

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

Имя и фамилия

<div class="flex flex-wrap items-cross-stretch w-full">
    <span class="flex items-cross-center color-on-surface bg-surface-2 border-top-1 border-bottom-1 border-surface-container p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-left-1/3 border-left-1">Имя и фамилия</span>
    <input type="text" aria-label="Имя" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest">
    <input type="text" aria-label="Фамилия" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-right-1/3 border-right-1 border-left-1">
</div>

Множественные кнопки

<div class="flex flex-wrap items-cross-stretch w-full m-bottom-1">
    <button class="border-1 border-error p-right-1 p-left-1 p-top-1/3 p-bottom-1/3 radius-left-1/3 color-on-surface hover:color-on-surface color-on-surface-inverse text-1 bg-error hover:bg-surface-0 transition cursor-pointer" type="button" id="button-addon1">
        Кнопка
    </button>
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-right-1/3 border-right-1" placeholder="" aria-label="Пример текста с кнопкой" aria-describedby="button-addon1">
</div>
<div class="flex flex-wrap items-cross-stretch w-full m-bottom-1">
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-left-1/3 border-left-1" placeholder="Имя пользователя получателя" aria-label="Имя пользователя получателя" aria-describedby="button-addon2">
    <button class="border-top-1 border-right-1 border-bottom-1 border-left-1 border-error p-right-1 p-left-1 p-top-1/3 p-bottom-1/3 radius-right-1/3 color-on-surface-inverse hover:color-on-surface bg-error text-1 hover:bg-surface-0 transition cursor-pointer" type="button" id="button-addon2">
        Кнопка
    </button>
</div>
<div class="flex flex-wrap items-cross-stretch w-full m-bottom-1">
    <button class="border-top-1 border-right-0 border-bottom-1 border-left-1 hover:border-error p-right-1 p-left-1 p-top-1/3 p-bottom-1/3 radius-left-1/3 color-on-surface hover:color-on-surface-inverse bg-surface-0 hover:bg-error text-1 transition cursor-pointer" type="button">
        Кнопка
    </button>
    <button class="border-1 hover:border-error p-right-1 p-left-1 p-top-1/3 p-bottom-1/3 color-on-surface hover:color-on-surface-inverse bg-surface-0 hover:bg-error text-1 transition cursor-pointer" type="button">
        Кнопка
    </button>
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-right-1/3 border-right-1" placeholder="" aria-label="Пример текста с двумя кнопками">
</div>

<div class="flex flex-wrap items-cross-stretch w-full">
    <input type="text" class="grow shrink basis-auto block weight-4 appearance-none transition bg-origin-padding p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 color-on-surface bg-surface-0 border-top-1 border-bottom-1 border-surface-lowest radius-left-1/3 border-left-1" placeholder="Имя пользователя получателя" aria-label="Имя пользователя получателя с надстройками из двух кнопок">
    <button class="border-top-1 border-right-1 border-bottom-1 border-left-1 border-error p-right-1 p-left-1 p-top-1/3 p-bottom-1/3 color-on-surface-inverse hover:color-on-surface bg-error text-1 hover:bg-surface-0 transition cursor-pointer" type="button">
        Кнопка
    </button>
    <button class="border-top-1 border-right-1 border-bottom-1 border-left-0 border-error p-right-1 p-left-1 radius-right-1/3 p-top-1/3 p-bottom-1/3 color-on-surface-inverse hover:color-on-surface bg-error text-1 hover:bg-surface-0 transition cursor-pointer" type="button">
        Кнопка
    </button>
</div>

Адаптивность

Для установки адаптивности элементов формы, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью