TextField

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

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

Live Editor
Result
Open in CodeSandbox

Размер поля​

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

Live Editor
Result
Open in CodeSandbox

Статус поля​

Статус поля задается с помощью свойства view.

Возможные значения свойства: "positive" | "warning" | "negative"

Live Editor
Result
Open in CodeSandbox

Вариация Clear​

На отображение компонента так же влияют свойства clear и hasDivider:

Live Editor
Result
Open in CodeSandbox

Подсказка​

Для вывода подсказок:

  • leftHelper внизу слева под компонентом
  • titleCaption сверху справа над компонентом
  • hintText для подсказки в виде Tooltip
Live Editor
Result
Open in CodeSandbox

Режим ввода​

С помощью свойства enumerationType можно вводить элементы как теги. Свойство chipType изменяет внешний вид чипа.

С помощью chipView можно задать общий вид Chip. Валидация Chip происходит с помощью функции chipValidator.

По нажатию Enter, после ввода нужного текста, он преобразуется в Chip.

Live Editor
Result
Open in CodeSandbox

Обязательность поля​

tip

Наличие индикатора регулируется свойством hasRequiredIndicator.

Обязательность поля задаётся с помощью свойств required и requiredPlacement.

Где requiredPlacement отвечает за выравнивание и принимает значения "left" и "right":

Live Editor
Result
Open in CodeSandbox

Примеры​

TextField + очистка поля​

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