"use client";
import React from 'react';
import { Box, Switch } from '@mui/material';

const CustomSwitch = styled((props: any) => <Switch {...props} />)(({ theme }) => ({
 '&.MuiSwitch-root': {
    width: '68px',
    height: '49px',
  },
  '&  .MuiButtonBase-root': {
    top: '6px',
    left: '6px',
  },
  '&  .MuiButtonBase-root.Mui-checked .MuiSwitch-thumb': {
    backgroundColor: 'primary.main',
  },
  '& .MuiSwitch-thumb': {
    width: '18px',
    height: '18px',
    borderRadius: '6px',
  },

  '& .MuiSwitch-track': {
    backgroundColor: theme.palette.grey[200],
    opacity: 1,
    borderRadius: '5px',
  },
  '& .MuiSwitch-switchBase': {
    '&.Mui-checked': {
      '& + .MuiSwitch-track': {
        backgroundColor: 'primary',
        opacity: 0.18,
      },
    },
  },
  }))
  
<Box textAlign="center">
        <CustomSwitch checked />
        <CustomSwitch />
        <CustomSwitch disabled defaultChecked />
        <CustomSwitch disabled />
</Box>

"use client";
import React from 'react';
import { Box, Switch } from '@mui/material';

<Box sx={{
        textAlign: "center"
    }}>
        <Switch defaultChecked />
        <Switch />
        <Switch disabled defaultChecked />
        <Switch disabled />
    </Box>

"use client";
import React from 'react';
import { Box, Switch, FormGroup, FormControlLabel } from '@mui/material';

<Box
    sx={{
      textAlign: 'center',
    }}>
    <FormGroup>
      <FormControlLabel control={<Switch defaultChecked />} label='Label' />
      <FormControlLabel disabled control={<Switch />} label='Disabled' />
    </FormGroup>
  </Box>

import React from 'react';
import { Box, Switch } from '@mui/material';

<Box sx={{
        textAlign: "center"
    }}>
        <Switch defaultChecked size="small" />
        <Switch defaultChecked />
    </Box>

import React from 'react';
import { Box, Switch } from '@mui/material';

<Box
    sx={{
      textAlign: 'center',
    }}>
    <Switch defaultChecked />
    <Switch defaultChecked color='secondary' />
    <Switch defaultChecked color='error' />
    <Switch defaultChecked color='warning' />
    <Switch defaultChecked color='success' />
    <Switch defaultChecked color='default' />
  </Box>

"use client";
import React from 'react';
import { Box, Switch, FormGroup, FormControlLabel } from '@mui/material';

<Box sx={{
        textAlign: "center"
    }}>
        <FormGroup aria-label="position" row>
            <FormControlLabel
                value="top"
                control={<Switch color="primary" />}
                label="Top"
                labelPlacement="top"
            />
            <FormControlLabel
                value="start"
                control={<Switch color="primary" />}
                label="Start"
                labelPlacement="start"
            />
            <FormControlLabel
                value="bottom"
                control={<Switch color="primary" />}
                label="Bottom"
                labelPlacement="bottom"
            />
            <FormControlLabel
                value="end"
                control={<Switch color="primary" />}
                label="End"
                labelPlacement="end"
            />
        </FormGroup>
    </Box>