Drawer Content Here
- Sign Out
RadioGroup

`RadioGroup` is a helpful wrapper used to group `Radio` components that provides an easier API, and proper keyboard accessibility to the group.

Checked
Unchecked
Disabled Checked
Disabled Unchecked

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

    // ** MUI Imports
    import Radio from '@mui/material/Radio'
    import RadioGroup from '@mui/material/RadioGroup'
    import FormControl from '@mui/material/FormControl'
    import FormControlLabel from '@mui/material/FormControlLabel'

    const RadioGroupComponent = () => {
      // ** State
      const [value, setValue] = useState('checked')

      const handleChange = event => {
        setValue(event.target.value)
      }

      return (
        <FormControl sx={{ flexWrap: 'wrap', flexDirection: 'row' }}>
          <RadioGroup row value={value} name='simple-radio' onChange={handleChange} aria-label='simple-radio'>
            <FormControlLabel value='checked' control={<Radio />} label='Checked' />
            <FormControlLabel value='unchecked' control={<Radio />} label='Unchecked' />
          </RadioGroup>

          <RadioGroup row value='disabled-checked' name='simple-disabled-radio' aria-label='simple-disabled-radio'>
            <FormControlLabel disabled value='disabled-checked' label='Disabled Checked' control={<Radio />} />
            <FormControlLabel disabled value='disabled-unchecked' label='Disabled Unchecked' control={<Radio />} />
          </RadioGroup>
        </FormControl>
      )
    }

    export default RadioGroupComponent

Controlled and Uncontrolled

Manage `value` prop with `RadioGroup` component with the help of a state for controlled radio and `defaultValue` prop with `RadioGroup` component for uncontrolled radio.

Controlled

Checked
Unchecked

Uncontrolled

Checked
Unchecked

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

    // ** MUI Imports
    import Grid from '@mui/material/Grid'
    import Radio from '@mui/material/Radio'
    import Typography from '@mui/material/Typography'
    import RadioGroup from '@mui/material/RadioGroup'
    import FormControlLabel from '@mui/material/FormControlLabel'

    const RadioControlledUncontrolled = () => {
      // ** State
      const [value, setValue] = useState('controlled-checked')

      const handleChange = event => {
        setValue(event.target.value)
      }

      return (
        <Grid container spacing={6}>
          <Grid item xs={12} sm={6}>
            <Typography>Controlled</Typography>
            <RadioGroup row aria-label='controlled' name='controlled' value={value} onChange={handleChange}>
              <FormControlLabel value='controlled-checked' control={<Radio />} label='Checked' />
              <FormControlLabel value='controlled-unchecked' control={<Radio />} label='Unchecked' />
            </RadioGroup>
          </Grid>
          <Grid item xs={12} sm={6}>
            <Typography>Uncontrolled</Typography>
            <RadioGroup row aria-label='uncontrolled' name='uncontrolled' defaultValue='uncontrolled-checked'>
              <FormControlLabel value='uncontrolled-checked' control={<Radio />} label='Checked' />
              <FormControlLabel value='uncontrolled-unchecked' control={<Radio />} label='Unchecked' />
            </RadioGroup>
          </Grid>
        </Grid>
      )
    }

    export default RadioControlledUncontrolled

Standalone Radio Buttons

`Radio` can also be used standalone, without the RadioGroup wrapper.

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

    // ** MUI Imports
    import Radio from '@mui/material/Radio'

    const RadioStandalone = () => {
      // ** State
      const [selectedValue, setSelectedValue] = useState('a')

      const handleChange = event => {
        setSelectedValue(event.target.value)
      }

      return (
        <div>
          <Radio
            value='a'
            onChange={handleChange}
            name='radio-button-demo'
            checked={selectedValue === 'a'}
            inputProps={{ 'aria-label': 'A' }}
          />
          <Radio
            value='b'
            onChange={handleChange}
            name='radio-button-demo'
            checked={selectedValue === 'b'}
            inputProps={{ 'aria-label': 'B' }}
          />
        </div>
      )
    }

    export default RadioStandalone

Colors

Use `color` prop with `Radio` component for different colored radio button.

Primary
Secondary
Success
Error
Warning
Info

    // ** MUI Imports
    import Radio from '@mui/material/Radio'
    import RadioGroup from '@mui/material/RadioGroup'
    import FormControlLabel from '@mui/material/FormControlLabel'

    const RadioColor = () => {
      return (
        <RadioGroup row aria-label='colored' name='colored' defaultValue='primary'>
          <FormControlLabel value='primary' control={<Radio />} label='Primary' />
          <FormControlLabel value='secondary' control={<Radio color='secondary' />} label='Secondary' />
          <FormControlLabel value='success' label='Success' control={<Radio color='success' />} />
          <FormControlLabel value='error' label='Error' control={<Radio color='error' />} />
          <FormControlLabel value='warning' label='Warning' control={<Radio color='warning' />} />
          <FormControlLabel value='info' label='Info' control={<Radio color='info' />} />
        </RadioGroup>
      )
    }

    export default RadioColor

Sizes

Use `color` prop with `Radio` component for different colored radio button.

Small
Default

    // ** MUI Imports
    import Radio from '@mui/material/Radio'
    import RadioGroup from '@mui/material/RadioGroup'
    import FormControlLabel from '@mui/material/FormControlLabel'

    const RadioSizes = () => {
      return (
        <RadioGroup row aria-label='sizes' name='sizes' defaultValue='small'>
          <FormControlLabel
            value='small'
            label='Small'
            control={<Radio size='small' sx={{ '& svg': { height: 16, width: 16 } }} />}
          />
          <FormControlLabel value='default' control={<Radio />} label='Default' />
        </RadioGroup>
      )
    }

    export default RadioSizes

Customized Radio

Use `styled` hook to customize your radio button.

Gender
Female
Male
Other
Disabled

    // ** MUI Imports
    import FormLabel from '@mui/material/FormLabel'
    import RadioGroup from '@mui/material/RadioGroup'
    import FormControl from '@mui/material/FormControl'
    import MuiRadio from '@mui/material/Radio'
    import FormControlLabel from '@mui/material/FormControlLabel'

    const Radio = props => {
      return (
        <MuiRadio
          {...props}
          disableRipple={true}
          sx={{ '& svg': { height: 18, width: 18 } }}
          checkedIcon={
            <svg width='24' height='24' viewBox='0 0 24 24'>
              <path fill='currentColor' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' />
            </svg>
          }
          icon={
            <svg width='24' height='24' viewBox='0 0 24 24'>
              <path
                fill='currentColor'
                d='M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z'
              />
            </svg>
          }
        />
      )
    }

    const RadioCustomized = () => {
      return (
        <FormControl>
          <FormLabel component='legend'>Gender</FormLabel>
          <RadioGroup row defaultValue='female' aria-label='gender' name='customized-radios'>
            <FormControlLabel value='female' control={<Radio />} label='Female' />
            <FormControlLabel value='male' control={<Radio />} label='Male' />
            <FormControlLabel value='other' control={<Radio />} label='Other' />
            <FormControlLabel value='disabled' disabled control={<Radio />} label='Disabled' />
          </RadioGroup>
        </FormControl>
      )
    }

    export default RadioCustomized

Label Placement

You can change the placement of the label with `FormControlLabel` component's `labelPlacement` prop.

Top
Bottom
Start
End

    // ** MUI Imports
    import Radio from '@mui/material/Radio'
    import RadioGroup from '@mui/material/RadioGroup'
    import FormControl from '@mui/material/FormControl'
    import FormControlLabel from '@mui/material/FormControlLabel'

    const RadioLabelPlacement = () => {
      return (
        <FormControl>
          <RadioGroup row aria-label='position' name='vertical' defaultValue='top'>
            <FormControlLabel value='top' label='Top' labelPlacement='top' sx={{ mr: 8.8 }} control={<Radio />} />
            <FormControlLabel value='bottom' control={<Radio />} label='Bottom' labelPlacement='bottom' />
          </RadioGroup>
          <RadioGroup row aria-label='position' name='horizontal' defaultValue='start' sx={{ mt: 4 }}>
            <FormControlLabel value='start' label='Start' labelPlacement='start' sx={{ mr: 4 }} control={<Radio />} />
            <FormControlLabel value='end' control={<Radio />} label='End' />
          </RadioGroup>
        </FormControl>
      )
    }

    export default RadioLabelPlacement

Show Error

In general, radio buttons should have a value selected by default. If this is not the case, you can display an error if no value is selected when the form is submitted.

Pop quiz: MUI is...
The best!
The worst.

Choose wisely

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

    // ** MUI Imports
    import Radio from '@mui/material/Radio'
    import Button from '@mui/material/Button'
    import FormLabel from '@mui/material/FormLabel'
    import RadioGroup from '@mui/material/RadioGroup'
    import FormControl from '@mui/material/FormControl'
    import FormHelperText from '@mui/material/FormHelperText'
    import FormControlLabel from '@mui/material/FormControlLabel'

    const RadioShowError = () => {
      // ** States
      const [value, setValue] = useState('')
      const [error, setError] = useState(false)
      const [helperText, setHelperText] = useState('Choose wisely')

      const handleRadioChange = event => {
        setError(false)
        setHelperText(' ')
        setValue(event.target.value)
      }

      const handleSubmit = event => {
        event.preventDefault()
        if (value === 'best') {
          setError(false)
          setHelperText('You got it!')
        } else if (value === 'worst') {
          setError(true)
          setHelperText('Sorry, wrong answer!')
        } else {
          setError(true)
          setHelperText('Please select an option.')
        }
      }

      return (
        <form onSubmit={handleSubmit}>
          <FormControl error={error}>
            <FormLabel component='legend'>Pop quiz: MUI is...</FormLabel>
            <RadioGroup aria-label='quiz' name='quiz' value={value} onChange={handleRadioChange}>
              <FormControlLabel value='best' control={<Radio />} label='The best!' />
              <FormControlLabel value='worst' control={<Radio />} label='The worst.' />
            </RadioGroup>
            <FormHelperText sx={{ mx: 0, fontSize: theme => theme.typography.body2.fontSize }}>{helperText}</FormHelperText>
            <Button type='submit' variant='outlined' sx={{ mt: 3 }}>
              Check Answer
            </Button>
          </FormControl>
        </form>
      )
    }

    export default RadioShowError