InputAdornment для иконок и текста

InputAdornment — это компонент библиотеки MUI, предназначенный для добавления декоративных элементов к полям ввода (TextField, OutlinedInput, FilledInput). Он позволяет размещать текст или иконки слева или справа от ввода, улучшая UX и визуальное восприятие формы.

Основная структура

Компонент InputAdornment оборачивается вокруг элемента, который нужно вставить в поле ввода, и подключается через свойства startAdornment или endAdornment родительского компонента ввода:

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

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

Ключевые моменты:

  • position="start" — элемент отображается слева.
  • position="end" — элемент отображается справа.
  • InputProps передает обертку к внутреннему компоненту ввода.

Использование с текстом

Помимо иконок, InputAdornment поддерживает текстовые вставки. Это полезно для единиц измерения, валют или подсказок:

<TextField
  label="Цена"
  InputProps={{
    endAdornment: <InputAdornment position="end">₽</InputAdornment>,
  }}
/>

В данном примере символ рубля появляется справа от поля, сохраняя корректное выравнивание текста.

Сочетание иконок и текста

В MUI разрешается комбинировать иконки и текст, например, добавлять иконку валюты слева и текст единицы измерения справа:

<TextField
  label="Вес"
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <img src="/icons/weight.svg" alt="Вес" />
      </InputAdornment>
    ),
    endAdornment: <InputAdornment position="end">кг</InputAdornment>,
  }}
/>

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

Настройка стилей

InputAdornment наследует стили от MUI, но их можно переопределять через sx или styled:

<InputAdornment
  position="start"
  sx={{ color: 'blue', fontWeight: 'bold', fontSize: '1rem' }}
>
  $
</InputAdornment>

Рекомендации по стилизации:

  • Цвет иконок и текста должен соответствовать теме (theme.palette).
  • Размер fontSize иконок и текста лучше согласовывать с высотой поля ввода.
  • Для иконок часто используют SvgIcon или встроенные компоненты Material Icons.

Полезные советы по применению

  1. Выравнивание: InputAdornment автоматически выравнивает содержимое по центру поля, но для сложных случаев можно использовать flex внутри компонента.
  2. Клики на иконки: Если иконка должна быть интерактивной (например, показать/скрыть пароль), её оборачивают в IconButton:
import Visibility from '@mui/icons-material/Visibility';
import IconButton from '@mui/material/IconButton';

<TextField
  label="Пароль"
  type="password"
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        <IconButton>
          <Visibility />
        </IconButton>
      </InputAdornment>
    ),
  }}
/>
  1. Многострочные поля: В TextField с multiline InputAdornment работает только с startAdornment, так как вертикальное выравнивание с endAdornment ограничено.
  2. Совместимость с формой: При использовании с библиотеками вроде react-hook-form InputAdornment не мешает привязке значений и обработке событий ввода.

Поддержка тем MUI

InputAdornment корректно реагирует на тему MUI, наследуя color, typography и spacing:

<InputAdornment
  position="end"
  sx={{
    color: 'primary.main',
    typography: 'subtitle2',
    mr: 1
  }}
>
  см
</InputAdornment>
  • Использование theme.palette обеспечивает единый стиль приложения.
  • typography помогает синхронизировать текст с другими элементами интерфейса.

Важные особенности

  • InputAdornment не является самостоятельным полем, его можно использовать только внутри компонентов ввода (TextField, OutlinedInput, FilledInput).
  • Можно комбинировать несколько элементов в одном adornment, используя контейнеры:
<InputAdornment position="start">
  <AccountCircle />
  <span style={{ marginLeft: 4 }}>User</span>
</InputAdornment>
  • При использовании иконок с интерактивностью важно следить за доступностью (aria-label, role, tabIndex).

Заключение по практическому применению

InputAdornment обеспечивает:

  • Визуальное улучшение форм.
  • Подсказки о формате данных или единицах измерения.
  • Возможность добавлять интерактивные элементы прямо в поля ввода.

Правильное использование startAdornment и endAdornment, а также стилизация через sx или styled, позволяет создавать формы профессионального уровня, которые выглядят современно и удобны в использовании.

Оглавление