Поле ввода

<sf-input> — однострочное поле для текста, почты, пароля, поиска, телефона или адреса. Оно собирает разметку поля ввода вместе с подписью, подсказкой и сообщением об ошибке. Для многострочного текста берите Textarea, для даты — Datepicker.

Пример

HTML

<div class="grid grid-col-1 md:grid-col-2 gap-3 items-cross-start">
  <sf-input
    name="search"
    label="Поиск по документации"
    placeholder="Компонент или утилита"
    hint="Введите минимум два символа"
    icon-start="search"
    text-end="Ctrl K">
  </sf-input>

  <sf-input
    name="project-code"
    label="Код проекта"
    value="simai.docs"
    hint="Это значение доступно только для чтения"
    icon-start="code"
    readonly>
  </sf-input>
</div>

Применение

Подпись, подсказка и пример ввода

label — видимая подпись и доступное имя поля, hint — постоянное пояснение под ним, placeholder — пример формата внутри пустого поля. Placeholder исчезает после ввода, поэтому подпись он не заменяет. required ставит звёздочку у подписи и делает обязательным нативное поле. В компактной панели подпись можно скрыть только визуально, оставив её в дереве доступности.

Места для знака «?» в строке подписи у <sf-input> нет. Поле с пояснением к подписи собирают на классах — см. Текстовые поля → Поле с пояснением к подписи.

Тип значения

input-type выбирает тип нативного поля: text, email, password, search, tel или url. Вместе с autocomplete и inputmode он подсказывает браузеру автозаполнение и нужную экранную клавиатуру. minlength, maxlength и pattern переходят на нативное поле, и браузер проверяет их перед отправкой формы.

Значок и текст по краям

icon-start ставит значок у логического начала поля, text-end — короткий текст у логического конца, hint-icon — значок подсказки в конце рамки. Логические стороны следуют направлению письма, поэтому та же разметка верна и справа налево. Своё содержимое передают слоты start и end; left-icon и right-text — другие имена icon-start и text-end.

Вид и размер

appearance выбирает вид: bordered — с рамкой, filled — с заливкой. appearance="hidden" выводит только скрытое поле формы без подписи и рамки — для значения, которое пользователь не видит. size выбирает ступень размерной шкалы: 1/2, 1 или 2.

Ошибка, недоступность и только чтение

invalid вместе с error-message показывает ошибку: сообщение встаёт на место подсказки и связывается с полем. readonly оставляет значение доступным для чтения и копирования, disabled выключает поле и исключает его из отправки формы. Вместо строк подсказки и ошибки можно передать разметку в слоты hint и error.

HTML

<div class="grid grid-col-1 md:grid-col-2 gap-3 items-cross-start">
  <sf-input
    name="email"
    label="Рабочая почта"
    input-type="email"
    autocomplete="email"
    value="ivanov@"
    required
    invalid
    error-message="Введите адрес целиком, например ivanov@example.com">
  </sf-input>

  <sf-input
    name="login"
    label="Логин"
    appearance="filled"
    value="ivanov"
    hint="Логин меняет администратор"
    disabled>
  </sf-input>
</div>

Маска

mask включает маску, mask-pattern задаёт шаблон, а mask-options — полные настройки JSON. В шаблоне 0 — цифра, a — буква, * — любой символ, {…} — постоянная часть, которая входит в значение (+{7}(000)000-00-00), \ экранирует символ, остальные символы только показываются. mask-lazy="false" показывает весь шаблон сразу, mask-placeholder-char задаёт символ пустой позиции; числовая маска — {"mask": "Number"}. Подробно грамматика и настройки числа — на странице «Текстовые поля». Маска помогает вводить значение, но не заменяет нативную и серверную проверку.

HTML

<sf-input
  name="phone"
  label="Телефон"
  input-type="tel"
  inputmode="tel"
  autocomplete="tel-national"
  placeholder="(000) 000-00-00"
  hint="Десять цифр после +7"
  mask
  mask-pattern="(000) 000-00-00">
</sf-input>

Значение в форме и события

Внутри <sf-input> лежит обычный <input> с переданным name, поэтому значение попадает в FormData и отправку формы. Атрибут value задаёт значение, которым управляет страница: при перерисовке поле показывает его. default-value задаёт только начальное значение, дальше поле хранит то, что ввёл пользователь. Свойство value элемента читает и задаёт текущее значение.

input приходит при каждом изменении во время ввода, change — когда значение зафиксировано. Оба — нативные события внутреннего поля, всплывают через <sf-input>, detail у них нет; значение читайте из event.target.value. getInputElement() возвращает внутренний <input> для стандартных методов — focus(), checkValidity(), setCustomValidity().

JavaScript

const email = document.querySelector('sf-input[name="email"]');
email.addEventListener('change', (event) => {
  const valid = event.target.checkValidity();
  email.toggleAttribute('invalid', !valid);
  email.setAttribute('error-message', valid ? '' : 'Проверьте адрес почты');
});
email.getInputElement().focus();

Доступность

Задайте видимую подпись в label: она связана с полем и даёт ему доступное имя. Один placeholder имени не даёт.
Подсказка и сообщение об ошибке связаны с полем через aria-describedby; при invalid поле получает aria-invalid и aria-errormessage.
Значки у краёв поля декоративные: смысл, который они несут, повторите в подписи или подсказке.
Поле — обычная остановка Tab с нативным редактированием текста; видимый фокус сохраняется при клавиатурной навигации.

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.


Тег	`<sf-input>`
Назначение	Нативное однострочное поле формы с оформлением Framework, сообщениями валидации и необязательной поддержкой маски.
Контракт	`smart.inputs`, версия `1.1.0`
Поставка	выпуск Framework `ui-106d5901f8c3`
Жизненный цикл	экспериментальный: API может меняться между выпусками
Готовность	описан: манифест и сценарий есть, продуктовой приёмки нет
Заготовка до прихода кода	сервер пишет `data-sf-skeleton="block"`; своего скелетона при загрузке данных нет (Заготовка до прихода кода)

Атрибуты

size — string, по умолчанию 1, значения: 1/2, 1, 2.
appearance — string, по умолчанию bordered, значения: bordered, filled, hidden. Вид поля: блок с рамкой, с заливкой или скрытый.
label — string, по умолчанию пусто.
required — boolean, по умолчанию false.
placeholder — string, по умолчанию пусто.
input-type — string, по умолчанию text, значения: text, email, password, search, tel, url.
autocomplete — string, по умолчанию пусто.
inputmode — string, по умолчанию пусто, значения: пусто, none, text, tel, url, email, numeric, decimal, search.
minlength — string, по умолчанию пусто.
maxlength — string, по умолчанию пусто.
pattern — string, по умолчанию пусто.
hint — string, по умолчанию пусто.
value — string, по умолчанию пусто.
default-value — string, по умолчанию пусто.
name — string, по умолчанию пусто.
icon-start — string, по умолчанию null.
text-end — string, по умолчанию null.
left-icon — string, по умолчанию пусто.
right-text — string, по умолчанию пусто.
hint-icon — string, по умолчанию пусто.
root-class — string, по умолчанию пусто.
disabled — boolean, по умолчанию false.
readonly — boolean, по умолчанию false.
error — boolean, по умолчанию false.
invalid — boolean, по умолчанию false.
error-message — string, по умолчанию пусто.
mask — boolean, по умолчанию false.
mask-pattern — string, по умолчанию пусто.
mask-lazy — string, по умолчанию пусто.
mask-placeholder-char — string, по умолчанию пусто.
mask-options — string, по умолчанию пусто.

Прежние имена:

Имя	Прежнее имя	Состояние	Убирается после
`appearance`	`type`	работает, отмечается в `SF.deprecations`	2026-12-01
`size="1/2"`	`size="1/3"`	работает, отмечается в `SF.deprecations`	2026-12-01
`size="2"`	`size="3"`	работает, отмечается в `SF.deprecations`	2026-12-01

Методы

getInputElement() — возвращает object | null. Возвращает внутренний нативный input или null до отрисовки.
onInput(handler: function, options?: object|boolean) — возвращает object. Добавляет обработчик input на хост-элементе. Возвращает элемент.
onChange(handler: function, options?: object|boolean) — возвращает object. Добавляет обработчик change на хост-элементе. Возвращает элемент.
onKeyUp(handler: function, options?: object|boolean) — возвращает object. Добавляет обработчик keyup на хост-элементе. Возвращает элемент.
onKeyDown(handler: function, options?: object|boolean) — возвращает object. Добавляет обработчик keydown на хост-элементе. Возвращает элемент.
onFocus(handler: function, options?: object|boolean) — возвращает object. Добавляет обработчик focusin на хост-элементе. Возвращает элемент.
onBlur(handler: function, options?: object|boolean) — возвращает object. Добавляет обработчик focusout на хост-элементе. Возвращает элемент.

События

Все события приходят на сам элемент и всплывают. Общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

change — detail: null. Значение зафиксировано; нативное событие всплывает от внутреннего input, который является его целью. detail не передаётся.
input — detail: null. Значение изменилось во время ввода; нативное событие всплывает от внутреннего input, который является его целью. detail не передаётся.

Доступность

Роль: текстовое поле (textbox).
Доступное имя: обязательно.
Клавиши: Tab, обычная правка текста.
Фокус: Сохраняет видимый фокус на активном элементе управления.

Минимальная разметка

HTML

<sf-input label="Email" input-type="email" name="email" autocomplete="email"></sf-input>

Источник

simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/inputs
simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-inputs

Навигация

Главное

Документация

Содержание

Поле ввода

Пример

Применение

Подпись, подсказка и пример ввода

Тип значения

Значок и текст по краям

Вид и размер

Ошибка, недоступность и только чтение

Маска

Значение в форме и события

Доступность

Справочник API

Атрибуты

Методы

События

Доступность

Минимальная разметка

Источник

Настройки