FormGroup для группировки

FormGroup в библиотеке MUI — это компонент, предназначенный для логической группировки элементов формы, таких как чекбоксы и радиокнопки. Он обеспечивает удобное управление расположением и согласованностью визуального оформления группы элементов, упрощая работу с формами в React-приложениях.

Основные возможности FormGroup

  1. Группировка элементов

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

  2. Вертикальное и горизонтальное расположение

    По умолчанию FormGroup располагает дочерние элементы вертикально. Для изменения ориентации на горизонтальную используется проп row:

    <FormGroup row>
  <FormControlLabel control={<Checkbox />} label="Опция 1" />
  <FormControlLabel control={<Checkbox />} label="Опция 2" />
</FormGroup>

    Проп row является булевым, его установка в true активирует горизонтальное размещение элементов.

  3. Совместимость с FormControl и FormControlLabel

    FormGroup чаще всего используется в связке с компонентами FormControl и FormControlLabel, обеспечивая правильное связывание элементов и их лейблов. Пример:

    <FormControl component="fieldset">
  <FormGroup>
    <FormControlLabel
      control={<Checkbox />}
      label="Выбрать всё"
    />
    <FormControlLabel
      control={<Checkbox />}
      label="Опция A"
    />
    <FormControlLabel
      control={<Checkbox />}
      label="Опция B"
    />
  </FormGroup>
</FormControl>

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

Управление состоянием элементов внутри FormGroup

FormGroup не управляет состоянием дочерних элементов напрямую. Это необходимо делать через состояние React. Пример управления несколькими чекбоксами:

import React, { useState } from 'react';
import { FormGroup, FormControlLabel, Checkbox } from '@mui/material';

function CheckboxGroup() {
  const [checkedItems, setCheckedItems] = useState({
    option1: false,
    option2: false,
    option3: false,
  });

  const handleChange = (event) => {
    setCheckedItems({
      ...checkedItems,
      [event.target.name]: event.target.checked,
    });
  };

  return (
    <FormGroup>
      <FormControlLabel
        control={
          <Checkbox
            checked={checkedItems.option1}
            onCha nge={handleChange}
            name="option1"
          />
        }
        label="Опция 1"
      />
      <FormControlLabel
        control={
          <Checkbox
            checked={checkedItems.option2}
            onCha nge={handleChange}
            name="option2"
          />
        }
        label="Опция 2"
      />
      <FormControlLabel
        control={
          <Checkbox
            checked={checkedItems.option3}
            onCha nge={handleChange}
            name="option3"
          />
        }
        label="Опция 3"
      />
    </FormGroup>
  );
}

В этом примере каждое изменение состояния чекбокса обновляет объект checkedItems, обеспечивая синхронное управление всеми элементами группы.

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

FormGroup также используется с RadioGroup, но при этом структура немного меняется:

<FormControl component="fieldset">
  <FormLabel component="legend">Выберите вариант</FormLabel>
  <RadioGroup row aria-label="варианты" name="options">
    <FormControlLabel value="option1" control={<Radio />} label="Опция 1" />
    <FormControlLabel value="option2" control={<Radio />} label="Опция 2" />
    <FormControlLabel value="option3" control={<Radio />} label="Опция 3" />
  </RadioGroup>
</FormControl>

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

Кастомизация стилей

FormGroup позволяет легко интегрировать кастомные стили с использованием MUI sx пропа или системных классов:

<FormGroup sx={{ marginTop: 2, gap: 2 }}>
  <FormControlLabel control={<Checkbox />} label="Опция A" />
  <FormControlLabel control={<Checkbox />} label="Опция B" />
</FormGroup>
  • marginTop — добавляет отступ сверху.
  • gap — задает расстояние между дочерними элементами, заменяя стандартные пробелы.

Практические рекомендации

  • Использовать FormGroup всегда, когда необходимо визуально и логически объединить чекбоксы или радиокнопки.
  • Для горизонтального расположения элементов использовать проп row.
  • Управление состоянием дочерних элементов следует делать через React state или сторонние формы, такие как Formik или React Hook Form.
  • Для сложных форм сочетать FormGroup с FormControl, FormControlLabel и FormHelperText, чтобы сохранить семантику и доступность формы.

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

Оглавление