Skip to main content

Checkbox

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

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

const CheckboxBasic = () => {
  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' />} />
      <FormControlLabel label='Indeterminate' control={<Checkbox indeterminate name='basic-indeterminate' />} />
    </FormGroup>
  )
}

export default CheckboxBasic
Controlled and Uncontrolled

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

// React Imports
import { useState } from 'react'
import type { ChangeEvent } from 'react'

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

const CheckboxControlledUncontrolled = () => {
  // States
  const [checked, setChecked] = useState<boolean>(true)

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    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 CheckboxControlledUncontrolled
Colors

Use color prop for different colored checkbox.

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

const CheckboxColors = () => {
  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 CheckboxColors
Custom Icons

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

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

const CheckboxCustomIcons = () => {
  return (
    <FormGroup row>
      <FormControlLabel
        label='Heart'
        control={
          <Checkbox
            defaultChecked
            name='size-small'
            checkedIcon={<i className='ri-heart-fill' />}
            icon={<i className='ri-heart-line' />}
          />
        }
      />
      <FormControlLabel
        label='Star'
        control={
          <Checkbox
            defaultChecked
            name='size-small'
            checkedIcon={<i className='ri-star-fill' />}
            icon={<i className='ri-star-line' />}
          />
        }
      />
    </FormGroup>
  )
}

export default CheckboxCustomIcons
Customized

Use styled hook to customize your checkbox.

// MUI Imports
import { styled } from '@mui/material/styles'
import Checkbox from '@mui/material/Checkbox'
import type { CheckboxProps } 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: CheckboxProps) => {
  return (
    <Checkbox
      {...props}
      disableRipple
      color='default'
      icon={<BpIcon />}
      checkedIcon={<BpCheckedIcon />}
      inputProps={{ 'aria-label': 'Checkbox demo' }}
      className='hover:bg-transparent'
    />
  )
}

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

export default CheckboxCustomized
Label Placement

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

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

const CheckboxLabelPlacement = () => {
  return (
    <div>
      <FormGroup row>
        <FormControlLabel
          value='top'
          label='Top'
          labelPlacement='top'
          control={<Checkbox />}
          className='mie-[2.3rem]'
        />
        <FormControlLabel value='bottom' label='Bottom' labelPlacement='bottom' control={<Checkbox />} />
      </FormGroup>
      <FormGroup row className='mbs-4'>
        <FormControlLabel value='start' label='Start' control={<Checkbox />} labelPlacement='start' className='mie-4' />
        <FormControlLabel value='end' control={<Checkbox />} label='End' />
      </FormGroup>
    </div>
  )
}

export default CheckboxLabelPlacement
Show Error

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

Be careful

You can display an error

// React Imports
import { useState } from 'react'
import type { ChangeEvent } from 'react'

// MUI Imports
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'

type StateType = {
  [key: string]: boolean
}

const CheckboxShowError = () => {
  // States
  const [state, setState] = useState<StateType>({
    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: ChangeEvent<HTMLInputElement>) => {
    setState({ ...state, [event.target.name]: event.target.checked })
  }

  return (
    <div className='flex flex-wrap'>
      <FormControl className='mbs-4 mie-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>Be careful</FormHelperText>
      </FormControl>
      <FormControl required error={error} className='mbs-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>You can display an error</FormHelperText>
      </FormControl>
    </div>
  )
}

export default CheckboxShowError
Sizes

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

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

const CheckboxSizes = () => {
  return (
    <FormGroup row>
      <FormControlLabel label='Small' control={<Checkbox size='small' defaultChecked name='size-small' />} />
      <FormControlLabel label='Medium' control={<Checkbox defaultChecked name='size-medium' />} />
    </FormGroup>
  )
}

export default CheckboxSizes