TextField

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

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

Live Editor
Result
Open in CodeSandbox

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

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

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

Размер поля​

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

Live Editor
Result
Open in CodeSandbox

Вид поля​

Вид поля задается с помощью свойства view. Возможные значения свойства: default, positive, warning и negative. На отображение TextField так же влияют свойства clear и hasDivider:

Live Editor
Result
Open in CodeSandbox

Подсказка​

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

Live Editor
Result
Open in CodeSandbox

Режим ввода​

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

Live Editor
Result
Open in CodeSandbox