InputLabel и его позиционирование

Основы InputLabel

InputLabel — это компонент библиотеки MUI, который используется для отображения текстовой метки над полем ввода (TextField, Select и другими компонентами ввода). Он автоматически взаимодействует с компонентами ввода, обеспечивая правильное позиционирование и поведение при фокусе или заполнении поля.

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

htmlFor — связывает метку с элементом ввода через его id. Это обеспечивает доступность и корректное управление фокусом.
shrink — управляет состоянием «сжатия» метки. Когда true, метка смещается вверх над полем ввода, как это происходит при фокусе или заполненном поле.
variant — определяет визуальный стиль метки, соответствующий варианту TextField (standard, outlined, filled).
required — добавляет визуальный индикатор обязательного поля.

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

import { InputLabel, TextField } from '@mui/material';

<InputLabel htmlFor="username">Имя пользователя</InputLabel>
<TextField id="username" />

Взаимодействие с TextField

Компонент TextField в MUI автоматически использует InputLabel для всех своих вариантов. Важное поведение: когда поле ввода получает фокус или содержит значение, метка автоматически «сжимается» и перемещается вверх. Этот эффект управляется через свойство shrink.

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

<TextField
  label="Email"
  variant="outlined"
  fullWidth
/>

В этом случае метка создается автоматически, и InputLabel подстраивается под выбранный вариант поля. Если требуется отдельный контроль метки, можно использовать InputLabel напрямую:

<InputLabel htmlFor="custom-input" shrink={true}>
  Пароль
</InputLabel>
<TextField id="custom-input" variant="filled" />

Позиционирование InputLabel

Позиционирование метки зависит от:

Варианта поля ввода (variant)
- standard — метка находится внутри поля по умолчанию и смещается при вводе.
- outlined — метка интегрирована в контур поля, при фокусе смещается выше.
- filled — метка внутри залитого поля и поднимается при заполнении.
Состояния фокуса и значения
- Метка автоматически сжимается при фокусе.
- Можно принудительно включить сжатие через shrink={true}.
Свойства margin и formControl
- Часто InputLabel используется внутри компонента FormControl, который управляет вертикальным выравниванием и отступами.
- Свойство margin="dense" уменьшает высоту и сдвигает метку ближе к полю ввода.

Пример с FormControl и Outlined:

import { FormControl, InputLabel, OutlinedInput } from '@mui/material';

<FormControl variant="outlined" fullWidth>
  <InputLabel htmlFor="outlined-age">Возраст</InputLabel>
  <OutlinedInput id="outlined-age" label="Возраст" />
</FormControl>

Важный момент: для варианта outlined метка должна быть связана с полем через label в компоненте OutlinedInput, иначе она не будет корректно интегрирована в контур.

Пользовательская настройка позиционирования

Для точной настройки позиции метки можно использовать стили MUI:

<InputLabel
  htmlFor="custom-style"
  sx={{
    transform: 'translate(14px, 20px) scale(1)',
    '&.Mui-focused': {
      transform: 'translate(14px, -6px) scale(0.75)',
    },
  }}
>
  Кастомная метка
</InputLabel>
<TextField id="custom-style" variant="outlined" />

transform управляет положением и масштабом метки.
Селектор .Mui-focused отвечает за поведение при фокусе.
Использование sx позволяет гибко менять позиционирование без переписывания темы.

Интеграция с темой

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

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiInputLabel: {
      styleOverrides: {
        root: {
          color: '#1976d2',
          fontSize: '1rem',
        },
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <TextField label="Имя" variant="outlined" />
</ThemeProvider>

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

Поведение в комбинации с Sel ect и другими компонентами

InputLabel также используется для компонентов Select и Autocomplete. Для корректного позиционирования требуется:

Указывать id поля и htmlFor метки.
Использовать FormControl для управления размерами и отступами.
В случае outlined варианта — передавать label внутрь компонента Select через label или labelId.

Пример с Select:

import { FormControl, InputLabel, Select, MenuItem } fr om '@mui/material';

<FormControl variant="outlined" fullWidth>
  <InputLabel id="demo-select-label">Страна</InputLabel>
  <Select labelId="demo-select-label" id="country-select" label="Страна">
    <MenuItem value="RU">Россия</MenuItem>
    <MenuItem value="US">США</MenuItem>
  </Select>
</FormControl>