Skip to content

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

Свойства

ИмяТипОписаниеПо умолчанию
labelstringТекст подписи; для своей разметки используйте слот label.
labelPropsTSLabelFieldPropsПропсы, передаваемые во внутренний SLabel.
placeholderstringPlaceholder нативного input.
helpMessagesTSInputMessagesПодсказка под полем (строка или массив).
errorMessagesTSInputMessagesТекст ошибки под полем (строка или массив).
borderedbooleanРисует стандартный контур поля.true
disabledbooleanОтключает редактирование и взаимодействие.false
readonlybooleanТолько чтение без стиля disabled.false
clearablebooleanКнопка очистки при непустом значении.false
hasValuebooleanЗаполненность поля для clearable, если #control переопределён (иначе — длина v-model).
focusedbooleanВизуальное состояние фокуса (например, открытый dropdown у select).false
iconLeftTSIconNameВедущая иконка в строке поля.
iconRightTSIconNameЗамыкающая иконка как bare-кнопка действия.
customizeESInputCustomizeРаскладка слотов prepend/customize.'none'
namestringАтрибут name нативного input.
typestringАтрибут type (например text, password).'text'
idstringАтрибут id; генерируется автоматически, если не задан.
autocompletestringАтрибут autocomplete.
modelValue / v-modelstringДвустороннее значение компонента (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