Drawer Content Here
- Sign Out
Basic Checkboxes
Checked
Unchecked
Disabled Checked
Disabled Unchecked

    // ** MUI Imports
    import Checkbox from '@mui/material/Checkbox'
    import FormGroup from '@mui/material/FormGroup'
    import FormControlLabel from '@mui/material/FormControlLabel'

    const CheckboxesBasic = () => {
      return (
        <FormGroup row>
          <FormControlLabel label='Checked' control={<Checkbox defaultChecked name='basic-checked' />} />
          <FormControlLabel label='Unchecked' control={<Checkbox name='basic-unchecked' />} />
          <FormControlLabel
            disabled
            label='Disabled Checked'
            control={<Checkbox defaultChecked name='basic-disabled-checked' />}
          />
          <FormControlLabel disabled label='Disabled Unchecked' control={<Checkbox name='basic-disabled-unchecked' />} />
        </FormGroup>
      )
    }

    export default CheckboxesBasic

Controlled and Uncontrolled

Manage `checked` prop with the help of a state for controlled `Checkbox` and `defaultChecked` prop with for uncontrolled `Checkbox`.

Controlled
Uncontrolled

    // ** React Imports
    import { useState } from 'react'

    // ** MUI Imports
    import Checkbox from '@mui/material/Checkbox'
    import FormGroup from '@mui/material/FormGroup'
    import FormControlLabel from '@mui/material/FormControlLabel'

    const CheckboxesControlledUncontrolled = () => {
      // ** State
      const [checked, setChecked] = useState(true)

      const handleChange = event => {
        setChecked(event.target.checked)
      }

      return (
        <FormGroup row>
          <FormControlLabel
            label='Controlled'
            control={<Checkbox checked={checked} onChange={handleChange} name='controlled' />}
          />
          <FormControlLabel label='Uncontrolled' control={<Checkbox defaultChecked name='uncontrolled' />} />
        </FormGroup>
      )
    }

    export default CheckboxesControlledUncontrolled

Colors

Use `color` prop for different colored checkbox.

Primary
Secondary
Success
Error
Warning
Info

    // ** MUI Imports
    import Checkbox from '@mui/material/Checkbox'
    import FormGroup from '@mui/material/FormGroup'
    import FormControlLabel from '@mui/material/FormControlLabel'

    const CheckboxesColors = () => {
      return (
        <FormGroup row>
          <FormControlLabel label='Primary' control={<Checkbox defaultChecked name='color-primary' />} />
          <FormControlLabel
            label='Secondary'
            control={<Checkbox defaultChecked name='color-secondary' color='secondary' />}
          />
          <FormControlLabel label='Success' control={<Checkbox defaultChecked name='color-success' color='success' />} />
          <FormControlLabel label='Error' control={<Checkbox defaultChecked name='color-error' color='error' />} />
          <FormControlLabel label='Warning' control={<Checkbox defaultChecked name='color-warning' color='warning' />} />
          <FormControlLabel label='Info' control={<Checkbox defaultChecked name='color-info' color='info' />} />
        </FormGroup>
      )
    }

    export default CheckboxesColors

Customized

Use `styled` hook to customize your checkbox.

    // ** MUI Imports
    import { styled } from '@mui/material/styles'
    import Checkbox from '@mui/material/Checkbox'

    const BpIcon = styled('span')(({ theme }) => ({
      width: 16,
      height: 16,
      borderRadius: 3,
      backgroundColor: theme.palette.mode === 'dark' ? '#394b59' : '#f5f8fa',
      'input:hover ~ &': {
        backgroundColor: theme.palette.mode === 'dark' ? '#30404d' : '#ebf1f5'
      },
      '.Mui-focusVisible &': {
        outlineOffset: 2,
        outline: '2px auto rgba(19,124,189,.6)'
      },
      'input:disabled ~ &': {
        boxShadow: 'none',
        background: theme.palette.mode === 'dark' ? 'rgba(57,75,89,.5)' : 'rgba(206,217,224,.5)'
      },
      boxShadow:
        theme.palette.mode === 'dark'
          ? '0 0 0 1px rgb(16 22 26 / 40%)'
          : 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
      backgroundImage:
        theme.palette.mode === 'dark'
          ? 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))'
          : 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))'
    }))

    const BpCheckedIcon = styled(BpIcon)({
      backgroundColor: '#137cbd',
      backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
      'input:hover ~ &': {
        backgroundColor: '#106ba3'
      },
      '&:before': {
        width: 16,
        height: 16,
        content: '""',
        display: 'block',
        backgroundImage:
          "url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
          " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
          "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E")"
      }
    })

    // Inspired by blueprintjs
    const BpCheckbox = props => {
      return (
        <Checkbox
          {...props}
          disableRipple
          color='default'
          icon={<BpIcon />}
          checkedIcon={<BpCheckedIcon />}
          inputProps={{ 'aria-label': 'Checkbox demo' }}
          sx={{ '&:hover': { backgroundColor: 'transparent' } }}
        />
      )
    }

    const CheckboxesCustomized = () => {
      return (
        <div>
          <BpCheckbox />
          <BpCheckbox defaultChecked />
          <BpCheckbox disabled />
        </div>
      )
    }

    export default CheckboxesCustomized

Custom Icons

Use `icon` and `checkedIcon` props with `Checkbox` component to change default checkbox icons.

Heart Star

    // ** MUI Imports
    import Checkbox from '@mui/material/Checkbox'
    import FormGroup from '@mui/material/FormGroup'
    import FormControlLabel from '@mui/material/FormControlLabel'

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    const CheckboxesCustomIcons = () => {
      return (
        <FormGroup row>
          <FormControlLabel
            label='Heart'
            control={
              <Checkbox
                defaultChecked
                name='size-small'
                checkedIcon={<Icon icon='mdi:heart' fontSize={24} />}
                icon={<Icon icon='mdi:heart-outline' fontSize={24} />}
              />
            }
          />
          <FormControlLabel
            label='Star'
            control={
              <Checkbox
                defaultChecked
                name='size-small'
                checkedIcon={<Icon icon='mdi:star' fontSize={24} />}
                icon={<Icon icon='mdi:star-outline' fontSize={24} />}
              />
            }
          />
        </FormGroup>
      )
    }

    export default CheckboxesCustomIcons

Label Placement

Use `labelPlacement` prop with `FormControlLabel` component to change the placement of the label.

Top
Bottom
Start
End

    // ** MUI Imports
    import Checkbox from '@mui/material/Checkbox'
    import FormGroup from '@mui/material/FormGroup'
    import FormControlLabel from '@mui/material/FormControlLabel'

    const CheckboxesLabelPlacement = () => {
      return (
        <div>
          <FormGroup row>
            <FormControlLabel value='top' label='Top' labelPlacement='top' control={<Checkbox />} sx={{ mr: 9.2 }} />
            <FormControlLabel value='bottom' label='Bottom' labelPlacement='bottom' control={<Checkbox />} />
          </FormGroup>
          <FormGroup row sx={{ mt: 4 }}>
            <FormControlLabel value='start' label='Start' control={<Checkbox />} labelPlacement='start' sx={{ mr: 4 }} />
            <FormControlLabel value='end' control={<Checkbox />} label='End' labelPlacement='end' />
          </FormGroup>
        </div>
      )
    }

    export default CheckboxesLabelPlacement

Show Error

You can display error by managing `error` prop with `FormControl` component with the help of a state.

Assign responsibility
Gilad Gray
Jason Killian
Antoine Llorca

Be careful

Pick two *
Gilad Gray
Jason Killian
Antoine Llorca

You can display an error

    // ** React Imports
    import { useState } from 'react'

    // ** MUI Imports
    import Box from '@mui/material/Box'
    import Checkbox from '@mui/material/Checkbox'
    import FormGroup from '@mui/material/FormGroup'
    import FormLabel from '@mui/material/FormLabel'
    import FormControl from '@mui/material/FormControl'
    import FormHelperText from '@mui/material/FormHelperText'
    import FormControlLabel from '@mui/material/FormControlLabel'

    const CheckboxesShowError = () => {
      // ** State
      const [state, setState] = useState({
        gilad: true,
        jason: false,
        antoine: false
      })

      // ** Vars
      const { gilad, jason, antoine } = state
      const error = [gilad, jason, antoine].filter(v => v).length !== 2

      const handleChange = event => {
        setState({ ...state, [event.target.name]: event.target.checked })
      }

      return (
        <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
          <FormControl sx={{ mt: 4, mr: 4 }}>
            <FormLabel>Assign responsibility</FormLabel>
            <FormGroup>
              <FormControlLabel
                label='Gilad Gray'
                control={<Checkbox checked={gilad} onChange={handleChange} name='gilad' />}
              />
              <FormControlLabel
                label='Jason Killian'
                control={<Checkbox checked={jason} onChange={handleChange} name='jason' />}
              />
              <FormControlLabel
                label='Antoine Llorca'
                control={<Checkbox checked={antoine} onChange={handleChange} name='antoine' />}
              />
            </FormGroup>
            <FormHelperText sx={{ mx: 0, fontSize: theme => theme.typography.body2.fontSize }}>Be careful</FormHelperText>
          </FormControl>
          <FormControl required error={error} sx={{ mt: 4 }}>
            <FormLabel>Pick two</FormLabel>
            <FormGroup>
              <FormControlLabel
                label='Gilad Gray'
                control={<Checkbox checked={gilad} onChange={handleChange} name='gilad' />}
              />
              <FormControlLabel
                label='Jason Killian'
                control={<Checkbox checked={jason} onChange={handleChange} name='jason' />}
              />
              <FormControlLabel
                label='Antoine Llorca'
                control={<Checkbox checked={antoine} onChange={handleChange} name='antoine' />}
              />
            </FormGroup>
            <FormHelperText sx={{ mx: 0, fontSize: theme => theme.typography.body2.fontSize }}>
              You can display an error
            </FormHelperText>
          </FormControl>
        </Box>
      )
    }

    export default CheckboxesShowError

Sizes

Use `icon` and `checkedIcon` props with `Checkbox` component and use `fontSize='small'` prop with the former props for small checkbox.

Small
Default

    // ** MUI Imports
    import Checkbox from '@mui/material/Checkbox'
    import FormGroup from '@mui/material/FormGroup'
    import FormControlLabel from '@mui/material/FormControlLabel'

    const CheckboxesSizes = () => {
      return (
        <FormGroup row>
          <FormControlLabel
            label='Small'
            sx={{ '& svg': { height: 20, width: 20 } }}
            control={<Checkbox defaultChecked name='size-small' />}
          />
          <FormControlLabel label='Default' control={<Checkbox defaultChecked name='size-default' />} />
        </FormGroup>
      )
    }

    export default CheckboxesSizes