Input

Отображает поле ввода

Используется как компонент формы на странице или непосредственно как компонент на странице приложения на базе Платформы. Может использоваться как поле поиска. Имеет несколько режимов работы: Text, Password, Hidden, Number, Int, Search. Каждый из режимов возвращает значение строкового типа данных. Имеет функцию отображения ошибок.

<Input 
  Mode="Text" 
  HighlightError={true} 
  Error={() => 'Максимальная длина ошибки две строки, если же длиннее ...'} 
  Model-var="LongErrorInput" 
  Label="LongErrorInput" 
/>

Свойства

Имя	Описание	Тип	Значение по умолчанию	Возможные значения
AutoComplete	Тип поля для автозаполнения браузером	string	new-password
AutoCompleteList	Массив значений для свойства Mode со значением Autocomplete	array
Autofocus	Признак установки фокуса на компонент	boolean	False
Badge	Количественная информация в компонентах Menu, Accordion, Link, Text. В качестве значения может использоваться объект с полями: counter (число), position ("post" или "pre"), color (цвет)	any
CSS	Массив строк-классов CSS-стилей компонента	array
CombineConfig	Конфигурация всех событий компонента. Служебное свойство для генерации фрагментов кода в визуальном режиме редактора форм. Не рекомендуется указывать значение вручную	object
DataHint	Подсказка к компоненту	string
DecrementTooltipLabel	Подсказка к стрелке уменьшения значения в поле ввода	string	Уменьшить
Disabled	Признак запрета на редактирование компонента	boolean	False
Error	Тескт ошибки при валидации компонента или undefined/false, если при валидации не обнаружены ошибки	boolean	False
ErrorMessage	Сообщение об ошибке при валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Платформы до 3.0. Вместо ErrorMessage рекомендуется использовать свойство Error	string
Focused	Признак фокусировки на компоненте	boolean	False
Hidden	Признак состояния компонента Скрыт	boolean	False
HidePasswordTooltipLabel	Подсказка к значку скрытия значения вводимого пароля	string	Скрыть пароль
HighlightError	Признак подсвечивания ошибки	boolean	True
Hint	Подсказка над компонентом	string
HintPosition	Сторона — правая или левая — для отображения подсказки	enum	right	left - Слева right - Справа top - Сверху bottom - Снизу topRight - Сверху справа topLeft - Сверху слева bottomRight - Снизу справа bottomLeft - Снизу слева
Id	Идентификатор компонента для навигации к нему на HTML-странице	string
IncrementTooltipLabel	Подсказка к стрелке увеличения значения в поле ввода	string	Увеличить
Label	Надпись на компоненте	string
MaxLength	Максимальная длина вводимой строки	number	30
Mode	Режим работы компонента в зависимости от типа вводимых данных	enum	Text	Text - Режим ввода текстовой информации Password - Режим ввода пароля с возможностью отобразить/скрыть пароль и очистить поле ввода Hidden - Режим скрытого поля ввода Number - Режим ввода вещественного числа Int - Режим ввода целого числа Search - Поиск текстовой и числовой информации на форме или странице Autocomplete - Режим ввода с подсказкой на основе возможных вариантов автозаполнения. Комбинируется с другими режимами, кроме Password
Model	Псевдоним свойств Value и OutputValue	any
NoWriteOnInit	Признак отказа от записи данных в переменную, заданную в свойствах OutputValue или Model, при создании компонента	boolean	False
OnBlur	Параметры команды, отправляемой при потере фокуса компонентом	undefined
OnChange	Параметры команды, отправляемой при изменении компонента, например, при вводе текста, выборе из списка	undefined
OnClick	Обработчик события нажатия кнопки мыши	undefined
OnDelay	Параметры команды, отправляемой по истечении секунды (для предотвращения ложного срабатывания обработчика события) после последнего изменения модели данных	undefined
OnEnterKeyDown	Параметры команды, отправляемой по нажатию Enter	undefined
OnKeyDown	Обработчик события KeyDown	undefined
OnKeyUp	Обработчик события KeyUp	undefined
OnMouseDown	Обработчик события MouseDown	undefined
OnMouseEnter	Обработчик события MouseEnter	undefined
OnMouseLeave	Обработчик события MouseLeave	undefined
OnMouseMove	Обработчик события MouseMove	undefined
OnMouseOut	Обработчик события MouseOut	undefined
OnMouseOver	Обработчик события MouseOver	undefined
OnMouseUp	Обработчик события MouseUp	undefined
OnUnmount	Обработчик события Unmount	undefined
OutputState	Имя переменной для записи информации, относящейся к состоянию компонента, но не относящейся к данным	any
OutputValue	Привязка отрисованного компонента к модели	any
ReadOnly	Признак запрета на редактирование компонента c возможностью копирования содержимого	boolean	False
Required	Признак обязательности заполнения. Не влияет на валидацию, отображает звездочку справа от надписи	boolean	False
ResetTooltipLabel	Подсказка к значку сброса текста	string	Очистить поле
ShowPasswordTooltipLabel	Подсказка к значку отображения значения вводимого пароля	string	Показать пароль
Slot	Метка для динамического добавления другого компонента по его идентификатору	string
Text	Заполнитель (Placeholder)	string
Tooltip	Всплывающая подсказка над компонентом, чаще используемая для пояснения назначения значка	any
TraceId	Идентификатор для отслеживания состояния компонента исходя из хронологической последовательности: создание, отрисовка, обновление, удаление; используется для выполнения фрагмента кода по изменению состояния компонента	string
Validation	Признак ошибки валидации компонента. Устаревшее свойство, используется только для совместимости с версиями Платформы до 3.0. Вместо Validation рекомендуется использовать свойство Error	boolean	False
Value	Привязка модели к отрисованному компоненту	any
Visible	Признак инверсии состояния компонента Скрыт	boolean	True
WriteMode	Имя события, по которому меняется значение переменной состояния (экранной формы), переданной в качестве OutputValue	enum		- Режим ввода без контроля состояния компонента

Примеры

Данные:

  "TextInput": "Если текст не вмещается то обрезаем через многоточие и показываем Hint.", "AutoCompleteList": ["январь", "февраль", "март", "апрель", "май", "июнь", "июль", "август", "сентябрь", "октябрь", "ноябрь", "декабрь"]
}

JSX:

<Group Mode="Column" >
  <Group CSS={['mb-48']}>
    <Group Mode="Column" Width="336px">
      <Text Mode="Medium_20" Value="Text" CSS={['mb-24']} />
      <Text Mode="Regular_14_2" Value="Используется для ввода пользователем текстовой и числовой информации." />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['mr-48', 'ml-48', 'pt-48']}>
      <Input Text="Плейсхолдер" Label="Лейбл" Model-var="normalText" Mode="Text" CSS={['mt-18']} />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['pt-48']}>
      <Input Error={() => 'Error'} Value="Если текст не вмещается то обрезаем через многоточие и показываем Hint." Label="Лейбл" Mode="Text" />
    </Group>
  </Group>
    
  <Group CSS={['mb-48']}>
    <Group Mode="Column" Width="336px">
      <Text Mode="Medium_20" Value="Search" CSS={['mb-24']} />
      <Text Mode="Regular_14_2" Value="Используется для поиска пользователем текстовой и числовой информации, на форме или странице." />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['mr-48', 'ml-48', 'pt-48']}>
      <Input Text="Поиск" Label="Лейбл" Model-var="searchText" Mode="Search" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['pt-48']}>
      <Input Error={() => 'Максимальная длина ошибки две строки, если же длиннее и сократить ее нельзя, то обрезаем через многоточие и показываем Hint.'} Value="Текст" Label="Лейбл" Mode="Text" />
    </Group>
  </Group>
  <Group CSS={['mb-48']}>
    <Group Mode="Column" Width="336px">
      <Text Mode="Medium_20" Value="Autocomplete" CSS={['mb-24']} />
      <Text Mode="Regular_14_2" Value="Используется для ввода пользователем информации с подсказкой из возможных вариантов для заполнения. Комбинируется с другими видами, кроме Password." />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['mr-48', 'ml-48', 'pt-48']}>
      <Input Text="Например, Январь" Label="Месяц" Model-var="fl" Mode="Autocomplete" AutoCompleteList-var="AutoCompleteList" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['pt-48']}>
      <Input Text="Например, Январь" Label="Месяц" Mode="Autocomplete" Value="январь" />
    </Group>
  </Group>
    
  <Group CSS={['mb-48']}>
    <Group Mode="Column" Width="336px">
      <Text Mode="Medium_20" Value="Password" CSS={['mb-24']} />
      <Text Mode="Regular_14_2" Value="Используется для ввода пользователем пароля. С возможностью показать/скрыть пароль и очистить поле." />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['mr-48', 'ml-48', 'pt-48']}>
      <Input Text="Введите пароль" Label="Пароль" Model-var="passwordText" Mode="Password" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['pt-48']}>
      <Input Value="Текст" Label="Пароль" Mode="Password" />
    </Group>
  </Group>
    
  <Group CSS={['mb-48']}>
    <Group Mode="Column" Width="336px">
      <Text Mode="Medium_20" Value="Number" CSS={['mb-24']} />
      <Text Mode="Regular_14_2" Value="Используется для ввода пользователем только цифр. С возможностью очистить поле." />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['mr-48', 'ml-48', 'pt-48']}>
      <Input Text="Например, 30" Label="Кол-во (шт)" Model-var="numberText" Mode="Number" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['pt-48']}>
      <Input  Value="25" Label="Кол-во (шт)" Mode="Number" />
    </Group>
  </Group>
  <Group CSS={['mb-48']}>
    <Group Mode="Column" Width="336px">
      <Text Mode="Medium_20" Value="Режимы" CSS={['mb-24']} />
      <Text Mode="Regular_14_2" Value="Disabled и ReadOnly" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['mr-48', 'ml-48', 'pt-48']}>
      <Input Disabled={true} Text="Текст" Label="Disabled" Value="Текст" Mode="Text" />
    </Group>
    <Group Mode="Column" Width="240px" CSS={['pt-48']}>
      <Input ReadOnly={true} Value="25" Label="ReadOnly" Mode="Number" />
    </Group>
  </Group>
    
</Group>