Тема
SInput
Обзор
Текстовое поле с подписью, иконками и сообщениями подсказки/ошибки.
Usage
Базовое поле с label и placeholder.
API
Краткий справочник props, slots и events — см. API Reference.
Guide
SInput — текстовое поле формы с label, иконками и inline-сообщениями.
- Значение — через
v-model/modelValue. helpMessagesиerrorMessagesотображаются под полем через встроенный рендерSInlineMessage.customizeуправляет расположением label относительно поля (horizontal/vertical).- Для составных форм используйте вместе с
SLabelиSTextarea— см. блок «Связанные» выше.
vue
<SInput v-model="title" label="Title" placeholder="Enter title" />Props
С ошибкой
Сообщение валидации под полем.
Disabled
Clearable
Vertical layout
API Reference
Свойства
| Имя | Тип | Описание | По умолчанию |
|---|---|---|---|
label | string | Текст подписи; для своей разметки используйте слот label. | — |
labelProps | TSLabelFieldProps | Пропсы, передаваемые во внутренний SLabel. | — |
placeholder | string | Placeholder нативного input. | — |
helpMessages | TSInputMessages | Подсказка под полем (строка или массив). | — |
errorMessages | TSInputMessages | Текст ошибки под полем (строка или массив). | — |
bordered | boolean | Рисует стандартный контур поля. | true |
disabled | boolean | Отключает редактирование и взаимодействие. | false |
readonly | boolean | Только чтение без стиля disabled. | false |
clearable | boolean | Кнопка очистки при непустом значении. | false |
hasValue | boolean | Заполненность поля для clearable, если #control переопределён (иначе — длина v-model). | — |
focused | boolean | Визуальное состояние фокуса (например, открытый dropdown у select). | false |
iconLeft | TSIconName | Ведущая иконка в строке поля. | — |
iconRight | TSIconName | Замыкающая иконка как bare-кнопка действия. | — |
customize | ESInputCustomize | Раскладка слотов prepend/customize. | 'none' |
name | string | Атрибут name нативного input. | — |
type | string | Атрибут type (например text, password). | 'text' |
id | string | Атрибут id; генерируется автоматически, если не задан. | — |
autocomplete | string | Атрибут autocomplete. | — |
modelValue / v-model | string | Двустороннее значение компонента (v-model). | '' |
События
| Имя | Описание | Payload |
|---|---|---|
clear | Срабатывает после очистки значения кнопкой clear. | — |
focus | Поле получило фокус. | FocusEvent |
blur | Поле потеряло фокус. | FocusEvent |
Слоты
| Имя | Описание |
|---|---|
label | Подпись поля; по умолчанию текст из prop label |
prepend | Блок над строкой ввода (вертикальный customize); scope: disabled |
prefix | Префикс в строке; по умолчанию iconLeft; scope: disabled |
control | Область ввода; по умолчанию нативный input; scope: disabled |
action | Действие справа; по умолчанию кнопка iconRight; scope: disabled |
message | Сообщения под полем; по умолчанию help/error из props |