TextField

Storybook

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

Компонент 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:

Live Editor
Result
Open in CodeSandbox

Подсказка​

Для вывода подсказки снизу от поля используйте свойство helperText:

Live Editor
Result
Open in CodeSandbox

Режим ввода​

С помощью свойства enumarationType можно вводить элементы как теги. По нажатию Enter, после ввода нужного текста, он преобразуется в Chip:

Live Editor
Result
Open in CodeSandbox