Input
Компонент для ввода текстовой информации. Представляет собой однострочное текстовое поле, которое позволяет пользователю вводить и редактировать текст.
Режим работы
Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение React-компонентов, прочитать про это можно в документации React ↗.
Для использования неконтролируемого режима достаточно просто не передавать value
или передавать defaultValue
, если
требуется задать значение по умолчанию.
Для контролируемого режима используйте связку свойств value
/onChange
для задания значения и его изменения.
// Неконтролируемое состояние
<Input name="name" defaultValue="Текст" />;
// Контролируемое состояние
const [text, setText] = React.useState('Текст');
<Input name="input" value={text} onChange={(event) => setText(event.target.value)} />;
Состояния
disabled
Свойство disabled
блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.
Валидация
Свойство status
используется для состояния валидации компонента - некорректности заполненного поля (значение "error"
)
или успешной валидации (значение "valid"
).
Доступность (a11y)
Компонент обеспечивает базовую доступность, поддерживая все стандартные HTML
-атрибуты для полей ввода.
Для улучшения доступности рекомендуется использовать обёртку FormItem
для компонента Input
для
поддержки заголовка и описания поля.
Свойства и методы
Свойство | Описание |
---|---|
after | ReactNode Добавляет иконку справа. Рекомендации:
По умолчанию: - |
afterAlign | FieldIconsAlign Вертикальное выравнивание иконки справа. По умолчанию: - |
align | AlignType По умолчанию: left |
before | ReactNode Добавляет иконку слева. Рекомендации:
По умолчанию: - |
beforeAlign | FieldIconsAlign Вертикальное выравнивание иконки слева. По умолчанию: - |
getRef | Ref<HTMLInputElement> По умолчанию: - |
getRootRef | Ref<HTMLDivElement> По умолчанию: - |
mode | "default" | "plain" Режим отображения.
По умолчанию: - |
status | "default" | "error" | "valid" Статус отображения поля в форме. По умолчанию: - |