FormControlLabel для подписей

FormControlLabel — это компонент библиотеки MUI (Material-UI), предназначенный для связывания интерактивных элементов управления, таких как чекбоксы (Checkbox), радиокнопки (Radio) или переключатели (Switch), с текстовыми подписями. Основная задача компонента — обеспечить корректное позиционирование текста относительно элемента управления и гарантировать доступность через свойства label и control.

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

  • control: обязательное свойство, принимающее React-элемент, обычно Checkbox, Radio или Switch. Этот элемент будет управлять состоянием выбора.

    <FormControlLabel
  control={<Checkbox />}
  label="Подписка на новости"
/>

  • label: строка, элемент или React-компонент, который отображается рядом с контролом. Можно использовать для стилизованного текста, иконок или сложных JSX-компонентов.

  • labelPlacement: определяет расположение текста относительно элемента управления. Возможные значения:

    • "end" — справа (по умолчанию)
    • "start" — слева
    • "top" — сверху
    • "bottom" — снизу Пример:
    <FormControlLabel
  control={<Switch />}
  label="Включить уведомления"
  labelPlacement="start"
/>

  • disabled: отключает и элемент управления, и подпись, делая их недоступными для взаимодействия.

    <FormControlLabel
  control={<Checkbox />}
  label="Недоступная опция"
  disabled
/>

  • value: значение, ассоциированное с контролом, особенно важно при работе с группами радио-кнопок (RadioGroup).

  • onChange: функция обратного вызова при изменении состояния контрола. Позволяет управлять состоянием родительского компонента.

    const [checked, setChecked] = React.useState(false);

<FormControlLabel
  control={
    <Checkbox checked={checked} onCha nge={(e) => setChecked(e.target.checked)} />
  }
  label="Принять условия"
/>

Использование с группой радио-кнопок

FormControlLabel часто применяется внутри RadioGroup для создания набора взаимно исключающих опций:

<RadioGroup value={selectedValue} onCha nge={(e) => setSelectedValue(e.target.value)}>
  <FormControlLabel value="option1" control={<Radio />} label="Опция 1" />
  <FormControlLabel value="option2" control={<Radio />} label="Опция 2" />
  <FormControlLabel value="option3" control={<Radio />} label="Опция 3" />
</RadioGroup>

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

Стилизация FormControlLabel

Для кастомизации внешнего вида можно использовать свойства MUI sx или классы CSS. Например, изменить цвет текста и размер шрифта:

<FormControlLabel
  control={<Checkbox />}
  label="Выбрать все"
  sx={{
    color: 'primary.main',
    '& .MuiFormControlLabel-label': {
      fontSize: '1.2rem',
      fontWeight: '500'
    }
  }}
/>

Доступность и семантика

FormControlLabel автоматически связывает элемент управления с его подписью через атрибут htmlFor, что повышает доступность интерфейсов. Использование aria-label или aria-labelledby обычно не требуется, если label передан правильно.

Взаимодействие с другими компонентами

  • Checkbox: FormControlLabel позволяет объединять несколько чекбоксов в FormGroup.
  • Radio: работает совместно с RadioGroup для создания групп опций.
  • Switch: для переключателей удобнее использовать labelPlacement="end" для стандартного интерфейса.

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

<FormGroup>
  <FormControlLabel
    control={<Checkbox checked={checkedA} onCha nge={handleChangeA} />}
    label="Опция A"
  />
  <FormControlLabel
    control={<Checkbox checked={checkedB} onCha nge={handleChangeB} />}
    label="Опция B"
    labelPlacement="start"
  />
  <FormControlLabel
    control={<Switch checked={switchOn} onCha nge={toggleSwitch} />}
    label="Включить функцию"
  />
</FormGroup>

В этом примере показано сочетание чекбоксов и переключателей с разным расположением текста, демонстрирующее гибкость компонента FormControlLabel.

Резюме функционала

  • Обеспечивает корректное связывание текстовой метки с интерактивным элементом.
  • Поддерживает разные положения подписи (labelPlacement).
  • Полностью интегрируется с Checkbox, Radio, Switch и группами этих контролов (FormGroup, RadioGroup).
  • Поддерживает стилизацию через sx, CSS-классы или темы MUI.
  • Улучшает доступность интерфейса благодаря правильной семантике.

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

Оглавление