Input, FilledInput, OutlinedInput

В библиотеке MUI (Material-UI) компоненты ввода играют ключевую роль в построении форм и интерактивных интерфейсов. Основные элементы для работы с текстовыми полями — это Input, FilledInput и OutlinedInput. Они обеспечивают единообразный пользовательский опыт и поддерживают расширенные возможности кастомизации.

Input

Input — базовый компонент текстового ввода. Его основной задачей является предоставление простого текстового поля с поддержкой стандартных событий ввода, таких как onChange, onFocus и onBlur.

Ключевые свойства:

  • value — текущее значение поля.
  • defaultValue — начальное значение, если поле не управляется.
  • type — тип ввода (text, password, email и др.).
  • placeholder — текст-заполнитель.
  • disabled — делает поле недоступным для редактирования.
  • readOnly — делает поле только для чтения.
  • error — логическое значение, указывающее на наличие ошибки.

Пример использования:

import Input from '@mui/material/Input';

<Input
  value={value}
  onCha nge={(e) => setValue(e.target.value)}
  placeholder="Введите текст"
  error={hasError}
/>

Особенности:

  • Поддержка вложенных иконок через startAdornment и endAdornment.
  • Легкая интеграция с формами, управляемыми через библиотеки вроде Formik или React Hook Form.
  • Минимальная визуальная стилизация, что делает компонент универсальным базовым строительным блоком.

FilledInput

FilledInput — компонент с заливкой, который визуально отличается от базового Input. Заливка создаёт ощущение глубины и делает поле более заметным.

Ключевые свойства:

  • Все свойства Input наследуются.
  • disableUnderline — убирает стандартное подчеркивание.
  • fullWidth — растягивает компонент на всю ширину контейнера.
  • margin — управление внешними отступами (none, dense, normal).

Пример использования:

import FilledInput from '@mui/material/FilledInput';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';

<FormControl variant="filled" fullWidth>
  <InputLabel htmlFor="filled-adornment">Email</InputLabel>
  <FilledInput
    id="filled-adornment"
    value={email}
    onCha nge={(e) => setEmail(e.target.value)}
  />
</FormControl>

Особенности:

  • Легко комбинируется с компонентами FormControl и InputLabel.
  • Позволяет добавлять вспомогательные элементы через startAdornment и endAdornment.
  • Подходит для форм с большим количеством полей, где требуется визуальная сегментация.

OutlinedInput

OutlinedInput — компонент с обводкой вокруг поля. Обводка создаёт четкое визуальное разграничение поля ввода и повышает читаемость формы.

Ключевые свойства:

  • Наследует свойства Input.
  • notched — управление вырезом для метки.
  • label — позволяет указать текст метки, который интегрируется с вырезом.
  • fullWidth и margin работают аналогично FilledInput.

Пример использования:

import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';

<FormControl variant="outlined" fullWidth>
  <InputLabel htmlFor="outlined-adornment">Пароль</InputLabel>
  <OutlinedInput
    id="outlined-adornment"
    type="password"
    value={password}
    onCha nge={(e) => setPassword(e.target.value)}
  />
</FormControl>

Особенности:

  • Идеально подходит для современных интерфейсов с четкой визуальной структурой.
  • Позволяет объединять поле с иконками, кнопками или вспомогательными элементами.
  • Поддержка состояния ошибки и вспомогательного текста через FormHelperText.

Сравнение Input, FilledInput и OutlinedInput

Свойство / Компонент Input FilledInput OutlinedInput
Внешний вид Минимальный Заливка Обводка
Поддержка adornment Да Да Да
Легкость интеграции Высокая Средняя Средняя
Совместимость с FormControl Да Да Да
Подходит для визуальной сегментации Нет Да Да

Выбор компонента зависит от дизайна интерфейса:

  • Для минималистичных форм лучше использовать Input.
  • Для форм с визуальной глубиной и заполненными полями — FilledInput.
  • Для форм с четкой границей и выделением — OutlinedInput.

Стилизация и кастомизация

Все три компонента можно настраивать через систему MUI sx, styled и theme. Например, можно менять цвет, ширину, высоту, анимацию фокуса и цвет метки.

<OutlinedInput
  sx={{
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: 'blue',
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: 'darkblue',
    },
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: 'green',
    },
  }}
/>
  • & .MuiOutlinedInput-notchedOutline управляет стилями рамки.
  • Псевдоклассы позволяют создавать интерактивные эффекты при наведении или фокусе.
  • Все компоненты поддерживают кастомные темы для глобальной унификации визуального стиля.

Поддержка событий и управление состоянием

Все текстовые поля MUI работают как управляемые и неуправляемые компоненты:

  • Управляемые: значение хранится в состоянии компонента React (useState) и обновляется через onChange.
  • Неуправляемые: значение хранится в DOM, управляется через defaultValue и рефы (ref).

Пример управляемого поля:

const [value, setValue] = useState('');

<Input
  value={value}
  onCha nge={(e) => setValue(e.target.value)}
/>

Пример неуправляемого поля:

const inputRef = useRef();

<Input defaultValue="Начальное значение" inputRef={inputRef} />

Интеграция с FormControl и FormHelperText

  • FormControl создаёт контейнер для поля ввода с меткой и вспомогательным текстом.
  • InputLabel используется для текста метки.
  • FormHelperText предоставляет дополнительную информацию или сообщение об ошибке.
<FormControl variant="outlined" error={hasError} fullWidth>
  <InputLabel htmlFor="outlined-helper">Имя</InputLabel>
  <OutlinedInput
    id="outlined-helper"
    value={name}
    onCha nge={(e) => setName(e.target.value)}
  />
  <FormHelperText>{hasError ? "Поле обязательно" : "Введите имя"}</FormHelperText>
</FormControl>
  • error управляет цветом рамки и текста.
  • Вспомогательный текст динамически меняется в зависимости от состояния поля.

Input, FilledInput и OutlinedInput предоставляют гибкий и мощный инструмент для создания форм в React, обеспечивая одновременно единый визуальный стиль и широкие возможности кастомизации. Их использование позволяет строить как простые поля ввода, так и сложные интерактивные формы с иконками, метками и подсказками.

Оглавление