Компонент input

Назначение компонента

Компонент input предназначен для создания различных типов полей ввода, таких как текстовые поля, поля для ввода email, а также текстовые области (textarea). Компонент поддерживает различные состояния (например, ошибка, отключенное состояние) и может быть адаптирован под разные размеры и стили.

Классы компонента

Контейнеры

  • .sf-input-container — основной контейнер для поля ввода.
  • .sf-input-container--1/3 — контейнер с шириной 1/3 от родительского элемента.
  • .sf-input-container--1/2 — контейнер с шириной 1/2 от родительского элемента.
  • .sf-input-container--2 — контейнер с шириной 2 (зависит от стилей).
  • .sf-input-container--3 — контейнер с шириной 3 (зависит от стилей).
  • .sf-input-container--error — контейнер для поля ввода с состоянием ошибки.
  • .sf-input-container--textarea — контейнер для текстовой области (textarea).

Элементы внутри контейнера:

  • .sf-input--top-label — верхний лейбл (надпись над полем ввода).
  • .sf-input — основное поле ввода.
  • .sf-input-email — поле ввода для email.
  • .sf-input-inner-label — внутренний лейбл для поля ввода.
  • .sf-input-main — основное поле ввода (input или textarea).
  • .sf-input-label-span — текст-заполнитель внутри поля ввода.
  • .sf-input-body--right — контейнер для дополнительного контента справа от поля ввода.
  • .sf-input--bottom-label — нижний лейбл (подпись под полем ввода).

Состояния компонента

1. Обычное состояние:

  • Поле ввода активно, пользователь может вводить данные.
  • Граница и текст имеют стандартные цвета.

2. Состояние ошибки:

  • Поле ввода подсвечивается красным цветом (--sf-input-error-color).
  • Используется класс .sf-input-container--error.

3. Отключенное состояние:

  • Поле ввода недоступно для редактирования.
  • Фоновый цвет и текст меняются на более светлые оттенки (--sf-input-disabled-bg, --sf-input-disabled-color).
  • Добавляется атрибут disabled к элементу input.

4. Состояние с иконкой:

  • Внутри поля ввода отображается иконка (например, иконка почты для поля email).
  • Используется класс .sf-icon.

5. Состояние с текстовой областью:

  • Вместо стандартного поля ввода используется textarea.
  • Используется класс .sf-input-container--textarea.

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

Контейнер размера 1/3

Label
mail
Right Content help
This is a hint text to help user. 
        
            <div class="sf-input-container sf-input-container--1/3">
                <span class="sf-input--top-label">
                    Label
                </span>
                <div class="sf-input sf-input--1/3" id="input_email">
                    <div class="flex">
                        <i class="sf-icon">mail</i>
                    </div>
                    <label class="sf-input-inner-label">
                        <input type="email" required="" class="sf-input-main" placeholder="">
                        <span class="sf-input-label-span">Введите почту</span>
                    </label>
                    <div class="sf-input-body--right">
                        <span>Right Content</span>
                        <i class="sf-icon">help</i>
                    </div>
                </div>
                <span class="sf-input--bottom-label">
                    This is a hint text to help user.
                </span>
            </div>

Контейнер размера 1/2

Label
mail
Right Content help
This is a hint text to help user. 
        
            <div class="sf-input-container sf-input-container--1/2">
                <span class="sf-input--top-label">
                    Label
                </span>
                <div class="sf-input sf-input--1/2" id="input_email">
                    <div class="flex">
                        <i class="sf-icon">mail</i>
                    </div>
                    <label class="sf-input-inner-label">
                        <input type="email" required="" class="sf-input-main" placeholder="">
                        <span class="sf-input-label-span">Введите почту</span>
                    </label>
                    <div class="sf-input-body--right">
                        <span>Right Content</span>
                        <i class="sf-icon">help</i>
                    </div>
                </div>
                <span class="sf-input--bottom-label">
                    This is a hint text to help user.
                </span>
            </div>

Контейнер стандартного размера

Label
mail
Right Content help
This is a hint text to help user. 
        
            <div class="sf-input-container ">
                <span class="sf-input--top-label">
                    Label
                </span>
                <div class="sf-input " id="input_email">
                    <div class="flex">
                        <i class="sf-icon">mail</i>
                    </div>
                    <label class="sf-input-inner-label">
                        <input type="email" required="" class="sf-input-main" placeholder="">
                        <span class="sf-input-label-span">Введите почту</span>
                    </label>
                    <div class="sf-input-body--right">
                        <span>Right Content</span>
                        <i class="sf-icon">help</i>
                    </div>
                </div>
                <span class="sf-input--bottom-label">
                    This is a hint text to help user.
                </span>
            </div>

Контейнер стандартного размера 2

Label
mail
Right Content help
This is a hint text to help user. 
        
            <div class="sf-input-container sf-input-container--2">
                <span class="sf-input--top-label">
                    Label
                </span>
                <div class="sf-input " id="input_email">
                    <div class="flex">
                        <i class="sf-icon">mail</i>
                    </div>
                    <label class="sf-input-inner-label">
                        <input type="email" required="" class="sf-input-main" placeholder="">
                        <span class="sf-input-label-span">Введите почту</span>
                    </label>
                    <div class="sf-input-body--right">
                        <span>Right Content</span>
                        <i class="sf-icon">help</i>
                    </div>
                </div>
                <span class="sf-input--bottom-label">
                    This is a hint text to help user.
                </span>
            </div>

Контейнер стандартного размера 3

Label
mail
Right Content help
This is a hint text to help user. 
        
            <div class="sf-input-container sf-input-container--3">
                <span class="sf-input--top-label">
                    Label
                </span>
                <div class="sf-input " id="input_email">
                    <div class="flex">
                        <i class="sf-icon">mail</i>
                    </div>
                    <label class="sf-input-inner-label">
                        <input type="email" required="" class="sf-input-main" placeholder="">
                        <span class="sf-input-label-span">Введите почту</span>
                    </label>
                    <div class="sf-input-body--right">
                        <span>Right Content</span>
                        <i class="sf-icon">help</i>
                    </div>
                </div>
                <span class="sf-input--bottom-label">
                    This is a hint text to help user.
                </span>
            </div>

Контейнер деактивированного input

Label
mail
Right Content help
This is a hint text to help user. 
        
            <div class="sf-input-container sf-input-container--3">
                <span class="sf-input--top-label">
                    Label
                </span>
                <div class="sf-input sf-input--disabled" id="input_email">
                    <div class="flex">
                        <i class="sf-icon">mail</i>
                    </div>
                    <label class="sf-input-inner-label">
                        <input type="email" disabled required="" class="sf-input-main" placeholder="">
                        <span class="sf-input-label-span">Введите почту</span>
                    </label>
                    <div class="sf-input-body--right">
                        <span>Right Content</span>
                        <i class="sf-icon">help</i>
                    </div>
                </div>
                <span class="sf-input--bottom-label">
                    This is a hint text to help user.
                </span>
            </div>

Контейнер без границ

Label
mail
Right Content help
This is a hint text to help user. 
        
            <div class="sf-input-container sf-input-container--3">
                <span class="sf-input--top-label">
                    Label
                </span>
                <div class="sf-input sf-input--borderless" id="input_email">
                    <div class="flex">
                        <i class="sf-icon">mail</i>
                    </div>
                    <label class="sf-input-inner-label">
                        <input type="email" required="" class="sf-input-main" placeholder="">
                        <span class="sf-input-label-span">Введите почту</span>
                    </label>
                    <div class="sf-input-body--right">
                        <span>Right Content</span>
                        <i class="sf-icon">help</i>
                    </div>
                </div>
                <span class="sf-input--bottom-label">
                    This is a hint text to help user.
                </span>
            </div>

Контейнер цвета surface-2

Label
mail
Right Content help
This is a hint text to help user. 
        
            <div class="sf-input-container">
                <span class="sf-input--top-label">
                    Label
                </span>
                <div class="sf-input sf-input--borderless sf-input--surface-2" id="input_email">
                    <div class="flex">
                        <i class="sf-icon">mail</i>
                    </div>
                    <label class="sf-input-inner-label">
                        <input type="email" required="" class="sf-input-main" placeholder="">
                        <span class="sf-input-label-span">Введите почту</span>
                    </label>
                    <div class="sf-input-body--right">
                        <span>Right Content</span>
                        <i class="sf-icon">help</i>
                    </div>
                </div>
                <span class="sf-input--bottom-label">
                    This is a hint text to help user.
                </span>
            </div>

Контейнер цвета surface-3

Label
mail
Right Content help
This is a hint text to help user. 
        
            <div class="sf-input-container">
                <span class="sf-input--top-label">
                    Label
                </span>
                <div class="sf-input sf-input--borderless sf-input--surface-3" id="input_email">
                    <div class="flex">
                        <i class="sf-icon">mail</i>
                    </div>
                    <label class="sf-input-inner-label">
                        <input type="email" required="" class="sf-input-main" placeholder="">
                        <span class="sf-input-label-span">Введите почту</span>
                    </label>
                    <div class="sf-input-body--right">
                        <span>Right Content</span>
                        <i class="sf-icon">help</i>
                    </div>
                </div>
                <span class="sf-input--bottom-label">
                    This is a hint text to help user.
                </span>
            </div>
        
    
<div class="sf-input-container sf-input-container--1/2">
    <span class="sf-input--top-label">Email</span>
    <div class="flex items-cross-center sf-input sf-input--1/2 sf-input-email" id="input_email">
        <div class="flex">
            <i class="sf-icon">mail</i>
        </div>
        <label class="sf-input-inner-label">
            <input type="email" required class="sf-input-main">
            <span class="sf-input-label-span">Введите почту</span>
        </label>
        <div class="sf-input-body--right flex flex-center items-cross-center">
            <span>Right Content</span>
            <i class="sf-icon">help</i>
        </div>
    </div>
    <span class="sf-input--bottom-label">This is a hint text to help user.</span>
</div>

Примечания

  • Компонент поддерживает адаптивность за счет использования классов с шириной (например, .sf-input--1/3, .sf-input--1/2).
  • Для кастомизации внешнего вида можно использовать CSS-переменные, описанные в таблице выше.
  • Компонент может быть расширен для поддержки других типов полей ввода (например, пароль, телефон и т.д.).

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