Misaligned Radio and checkboxes with respective to their labels

Question

I am creating a Listing page for pet adoption in react and Material UI.While making first page,I am facing an issue regarding misalignment of radio buttons and checkbox with their labels.Checkbox and radio buttons are showing very far upwards vertically from their labels.I have tried everything i can but the issue persists. this is my file below. `

import { useState } from "react";
import { Container, Typography, FormControl, FormLabel, RadioGroup, FormControlLabel, Radio, Checkbox, Button, Box, Card, CardContent, FormGroup } from "@mui/material";
import PetsIcon from "@mui/icons-material/Pets";
import FavoriteIcon from "@mui/icons-material/Favorite";
import RabbitIcon from "@mui/icons-material/Pets";

export default function ListPetForm() {
  const [petType, setPetType] = useState("");
  const [bondedPair, setBondedPair] = useState("no");
  const [reasons, setReasons] = useState([]);
  const [duration, setDuration] = useState("1 month");

  const handleReasonChange = (event) => {
    const { value } = event.target;
    setReasons((prev) =>
      prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value]
    );
  };

  return (
    <Container maxWidth="sm" sx={{ mt: 4, display: "flex", justifyContent: "space-between", flexDirection: 'column' }}>
      <Typography variant="h5" gutterBottom>
        Step 1: The Basics
      </Typography>
      
      <FormControl component="fieldset" sx={{ mb: 2 }}>
        <FormLabel component="legend">What type of pet are you rehoming? *</FormLabel>
        <Box sx={{ display: "flex", gap: 2, mt: 1 }}>
          {["Dog", "Cat", "Rabbit"].map((pet) => (
            <Card
              key={pet}
              onClick={() => setPetType(pet)}
              sx={{
                textAlign: "center",
                cursor: "pointer",
                border: petType === pet ? "2px solid green" : "1px solid gray",
                flex: 1,
              }}
            >
              <CardContent>
                {pet === "Dog" && <PetsIcon fontSize="large" />}
                {pet === "Cat" && <FavoriteIcon fontSize="large" />}
                {pet === "Rabbit" && <RabbitIcon fontSize="large" />}
                <Typography>{pet}</Typography>
              </CardContent>
            </Card>
          ))}
        </Box>
      </FormControl>

      <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
        <FormControl component="fieldset" sx={{ mb: 2 }}>
          <FormLabel component="legend">Are you rehoming a bonded pair? *</FormLabel>
          <RadioGroup row value={bondedPair} onChange={(e) => setBondedPair(e.target.value)} sx={{ display: "flex", alignItems: "center", gap: 2 }}>
            <FormControlLabel value="no" control={<Radio sx={{ p: 0, m: 0 }} />} label="No" sx={{ display: 'flex', alignItems: 'center', gap: 1 }} />
            <FormControlLabel value="yes" control={<Radio sx={{ p: 0, m: 0 }} />} label="Yes" sx={{ display: 'flex', alignItems: 'center', gap: 1 }} />
          </RadioGroup>
        </FormControl>
        
        <FormControl component="fieldset" sx={{ mb: 2 }}>
          <FormLabel component="legend">Why do you need to rehome your pet? *</FormLabel>
          <FormGroup sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
            {[
              "Behavioural Issues",
              "Busy Schedule",
              "Change in Family Circumstances",
              "Does not get along with another Pet",
              "Fostered",
              "Found or Abandoned",
              "Human Health Issues (e.g. allergy, sickness)",
              "Infant, young children or pregnancy",
              "Landlord permission issue",
              "Ongoing costs (e.g. lost job)",
              "Pet Medical expenses (e.g. vet procedure)",
            ].map((reason) => (
              <FormControlLabel
                key={reason}
                control={<Checkbox checked={reasons.includes(reason)} onChange={handleReasonChange} value={reason} sx={{ p: 0, m: 0 }} />}
                label={reason}
                sx={{ display: 'flex', alignItems: 'center', gap: 1, marginLeft: '24px' }} // Adjusted margin for alignment
              />
            ))}
          </FormGroup>
        </FormControl>
      </Box>

      <FormLabel component="legend" sx={{ mt: 3 }}>How long are you able to keep your pet/s while we help find a suitable new home? *</FormLabel>
      <FormControl>
        <RadioGroup value={duration} onChange={(e) => setDuration(e.target.value)} sx={{ border: '2px solid red' }}>
          {["Less than 1 month", "1 month", "2 months", "Until a home is found"].map((option) => (
            <FormControlLabel key={option} value={option} control={<Radio />} label={option} sx={{ display: 'flex', alignItems: 'center', gap: 1 }} />
          ))}
        </RadioGroup>
      </FormControl>
      
      <Button variant="contained" color="primary" sx={{ mt: 2 }}>Continue</Button>
    </Container>
  );
}

Answer 1

The Checkboxes and Radio buttons are misaligned due to the styles you are adding in the sx prop. You're setting the margin and padding to zero. You can fix it by making the changes below:

1. Remove sx={{ p: 0, m: 0 }} from <Radio /> and <Checkbox />.
2. Remove marginLeft: '24px' in sx prop of <FormControlLabel />.

It should fix your misalignment issue ✅