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>Deprecated: Since 7.9.0. Вместо этого используйте По умолчанию: - |
getRootRef | Ref<HTMLDivElement>По умолчанию: - |
mode | "default" | "plain"Режим отображения.
По умолчанию: - |
slotProps | { root?: (HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute); input?: (InputHTMLAttributes<...> & ... 1 more ... & HasDataAttribute) | undefined; } | undefinedСвойства, которые можно прокинуть внутрь компонента:
По умолчанию: - |
status | "default" | "error" | "valid"Статус отображения поля в форме. По умолчанию: - |