TextField

Использование​

Компонент TextField может содержать иконку (или кнопку) слева и справа. Для этого используйте свойства contentLeft и contentRight:

Live Editor
Result
Open in CodeSandbox

Клавиатурная навигация​

Данный компонент может полностью управляться с помощью клавиатуры, используя следующие клавиши:

  • по нажатию Tab фокусируемся на инпуте
  • если enumeratinType=chip после ввода текста, по нажатию Enter, инпут очистится и появится Chip
  • если введен текст в инпуте по нажатию ArrowLeft или ArrowRight каретка передвигается по тексту
  • при достижении левой границы текста или отсутствии текста в инпуте, при нажатии Backspace удаляем последний Chip, если он есть
  • при достижении левой границы текста или отсутствии текста в инпуте, при нажатии ArrowLeft переключаемся на последний Chip, если он есть
  • при фокусе на Chip работает переключение фокуса на другие Chip по нажатию ArrowLeft, ArrowRight; если же Chip крайний правый, при нажатии ArrowRight фокус переходит на инпут

Размер поля​

Размер поля задаётся с помощью свойства size:

Live Editor
Result
Open in CodeSandbox

Статус поля​

Статус поля задается с помощью свойства status. Возможные значения свойства: success, warning и error. На отображение TextField так же влияют свойства clear и hasDivider:

Live Editor
Result
Open in CodeSandbox

Подсказка​

Для вывода подсказки снизу от поля используйте свойство helperText, для подсказки в виде Tooltip - hintText, для подсказки сверху справа - titleCaption:

Live Editor
Result
Open in CodeSandbox

Режим ввода​

С помощью свойства enumerationType можно вводить элементы как теги. Свойство chipType изменяет внешний вид чипа. С помощью chipView можно задать общий вид Chip. Валидация Chip происходит с помощью функции chipValidator. По нажатию Enter, после ввода нужного текста, он преобразуется в Chip.

Live Editor
Result
Open in CodeSandbox