TextField и его варианты

TextField в MUI — это один из базовых компонентов для ввода данных, обеспечивающий удобный способ взаимодействия пользователя с формами. Он инкапсулирует в себе HTML-элемент <input> или <textarea> с добавлением стилизованных элементов интерфейса, таких как лейблы, иконки, helper-тексты и индикаторы ошибок.

Основные свойства TextField

  • label — текст, отображаемый над полем ввода. Может быть статическим или плавающим при фокусе.

  • variant — стиль компонента, определяющий визуальное оформление. Доступные значения:

    • outlined — обводка вокруг поля.
    • filled — фон внутри поля с выделением верхнего лейбла.
    • standard — стандартный подчеркивающий стиль.

  • value и defaultValue — для управления значением поля, где value используется в контролируемых компонентах, а defaultValue — для неконтролируемых.

  • onChange — функция обратного вызова, вызываемая при изменении значения поля.

  • error — булевое значение, включающее отображение поля как ошибочного. Обычно используется вместе с helperText.

  • helperText — дополнительный текст под полем, часто применяемый для подсказок или сообщений об ошибке.

  • disabled — делает поле неактивным.

  • fullWidth — растягивает поле на всю доступную ширину контейнера.

  • type — определяет тип ввода (text, password, number, email, и т.д.).

Варианты использования

  1. Контролируемый компонент
import React, { useState } from 'react';
import TextField from '@mui/material/TextField';

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

  return (
    <TextField
      label="Имя"
      value={value}
      onCha nge={(e) => setValue(e.target.value)}
      variant="outlined"
      fullWidth
    />
  );
}

Контролируемые поля позволяют полностью управлять значением через состояние React, что удобно для валидации и обработки формы.

  1. Неконтролируемый компонент
import React, { useRef } from 'react';
import TextField from '@mui/material/TextField';

function UncontrolledTextField() {
  const inputRef = useRef();

  const handleClick = () => {
    alert(`Введено: ${inputRef.current.value}`);
  };

  return (
    <>
      <TextField
        label="Фамилия"
        defaultValue="Иванов"
        inputRef={inputRef}
        variant="filled"
      />
      <button onCl ick={handleClick}>Показать значение</button>
    </>
  );
}

Неконтролируемые поля используют внутреннее состояние DOM, что уменьшает нагрузку на React при работе с большим числом полей.

Варианты оформления поля

  • outlined — используется для акцентирования поля, подходит для сложных форм с большим количеством элементов.
  • filled — создаёт визуальный эффект заливки, улучшая восприятие на темном фоне.
  • standard — минималистичный стиль с линией под полем, экономит пространство.
<TextField label="Outlined" variant="outlined" />
<TextField label="Filled" variant="filled" />
<TextField label="Standard" variant="standard" />

Валидация и отображение ошибок

TextField тесно интегрирован с визуальной индикацией ошибок:

<TextField
  label="Email"
  variant="outlined"
  value={email}
  onCha nge={(e) => setEmail(e.target.value)}
  error={!isValidEmail(email)}
  helperText={!isValidEmail(email) ? 'Некорректный email' : 'Введите ваш email'}
/>

Здесь error меняет цвет рамки на красный, а helperText отображает сообщение пользователю.

Поддержка иконок и adornments

TextField позволяет добавлять элементы перед или после ввода с помощью InputProps и InputAdornment:

import InputAdornment from '@mui/material/InputAdornment';
import AccountCircle from '@mui/icons-material/AccountCircle';

<TextField
  label="Имя пользователя"
  variant="outlined"
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <AccountCircle />
      </InputAdornment>
    ),
  }}
/>

Adornments могут использоваться как для иконок, так и для единиц измерения, валюты или дополнительных кнопок внутри поля.

Многострочные поля (multiline)

Для ввода больших текстов применяется свойство multiline:

<TextField
  label="Описание"
  multiline
  rows={4}
  variant="outlined"
  fullWidth
/>

С помощью rows задаётся высота, а maxRows позволяет ограничивать разрастание поля.

Автозаполнение и управление форматом

TextField поддерживает HTML-атрибуты для автозаполнения (autoComplete) и ограничения ввода (inputProps):

<TextField
  label="Телефон"
  variant="filled"
  inputProps={{ maxLength: 10 }}
  autoComplete="tel"
/>

Это удобно для строгого форматирования и ускорения работы пользователя с формой.

Стилизация через sx и theme

MUI позволяет настраивать внешний вид TextField глобально через тему или локально через свойство sx:

<TextField
  label="Локальная стилизация"
  variant="outlined"
  sx={{
    marginTop: 2,
    '& .MuiInputBase-root': {
      color: 'green',
    },
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: 'blue',
    },
  }}
/>

Использование sx даёт гибкость и контроль над каждым элементом поля.

Интеграция с Formik и React Hook Form

TextField легко интегрируется с популярными библиотеками для управления формами:

  • Formik: через Field и as={TextField}.
  • React Hook Form: через Controller и render с TextField.

Это позволяет объединять валидацию, управление состоянием и визуализацию ошибок без избыточного кода.

TextField в MUI — это универсальный и мощный инструмент для построения форм, позволяющий создавать как простые, так и сложные интерфейсы с контролем состояния, валидацией и гибкой стилизацией. Его варианты и свойства дают полный контроль над визуальным и функциональным поведением полей ввода.

Оглавление