Snippets for Material-UI

Note: There are two ways to insert these:

• Trigger Suggest (⌃Space on macOS) and then type in the name; or you can enable the Editor: Tab Completion setting, then type the name of the snippet and press Tab.
• Execute the corresponding editor commands like Material-UI: insert <Button> (or even better, make keybindings for them!).

Performance Warning: Currently, the suggestions can cause performance issues due to VSCode API limitations. After the API is improved in an upcoming release I can fix these performance issues. Until then, the workaround is to either disable adding automatic imports for snippets (Settings > Extensions > Material-UI Snippets > Add Completion Imports) or use the commands to insert snippets instead of suggestions.

Using MUI v5?

For MUI v5 you'll need mui-snippets instead. This extension is for Material-UI v4.

Features

• Works in JS/X and TSX
• Automatically adds missing imports when a snippet is inserted (as long as it succeeds in parsing the entire file)
• You can configure whether to use controlled or uncontrolled form controls in the extension settings.

Settings

Form Control Mode

• controlled - inserts value and onChange properties
• uncontrolled - inserts defaultValue property

Import Paths

• auto - uses top level if other top level imports are found, second level otherwise
• top level - import { Button } from '@material-ui/core'
• second level - import Button from '@material-ui/core/Button'

Snippets

• muiAppBar: <AppBar>
• muiAppBarMenu: <AppBar> with menu icon
• muiBottomNavigation: <BottomNavigation>
• muiBottomNavigationAction: <BottomNavigationAction>
• muiButton: <Button>
• muiButtonGroup: <ButtonGroup>
• muiButtonGroupSize: <ButtonGroup> with size
• muiButtonGroupVertical: vertical <ButtonGroup>
• muiButtonSize: <Button> with size
• muiButtonText: text <Button>
• muiButtonWithIcon: <Button> with icon and label
• muiCardHeader: <CardHeader>
• muiCardMedia: <CardMedia>
• muiCheckboxLabel: <Checkbox> with <FormControlLabel>
• muiCheckboxLabelPlacement: <Checkbox> with <FormControlLabel>
• muiContainer: <Container>
• muiDialog: <Dialog>
• muiDialogSimple: <Dialog>
• muiDrawerPermanent: permanent <Drawer>
• muiDrawerPersistent: persistent <Drawer>
• muiDrawerTemporary: temporary <Drawer>
• muiEndAdornment: end <InputAdornment>
• muiExpansionPanel: <ExpansionPanel>
• muiExpansionPanelControlled: controlled <ExpansionPanel>
• muiFab: <Fab>
• muiFabExtended: <Fab variant="extended">
• muiFormControl: <FormControl>
• muiFormControlGroup: <FormControl> with <FormGroup>
• muiGridContainer: <Grid container>
• muiGridContainerCenter: <Grid container> with centering
• muiGridContainerFull: <Grid container> with all props
• muiGridListSubheader: <GridList> subheader
• muiGridListTilebar: <GridListTileBar>
• muiIconButton: <IconButton>
• muiMenu: <Menu>
• muiMenuItem: <MenuItem>
• muiMenuPopupState: <Menu> for material-ui-popup-state
• muiRadioGroup: <FormControl> with <RadioGroup>
• muiRadioLabel: <Radio> with <FormControlLabel>
• muiRadioLabelPlacement: <Radio> with <FormControlLabel> with labelPlacement
• muiSelectItem: <MenuItem> inside <Select>
• muiSliderContinuous: <Slider> with continuous values
• muiSliderDiscrete: <Slider> with discrete values
• muiSnackbar: <Snackbar>
• muiSnackbarContent: <SnackbarContent>
• muiStartAdornment: start <InputAdornment>
• muiStep: <Step>
• muiStepContent: <Step> with <StepContent>
• muiStepOptional: optional <Step>
• muiStepper: <Stepper>
• muiSwipeableViews: <SwipeableViews>
• muiSwitch: <Switch>
• muiSwitchLabel: <Switch> with <FormControlLabel>
• muiSwitchLabelPlacement: <Switch> with <FormControlLabel> with labelPlacement
• muiTabPanel: <TabPanel>
• muiTabs: <Tabs>
• muiTabsScrollable: scrollable <Tabs>
• muiTextField: <TextField>
• muiTextFieldMore: <TextField> with more props
• muiTextFieldSelect: <TextField select>
• muiTextFieldVariant: <TextField> with variant
• muiTooltip: <Tooltip>
• muiTypography: <Typography>

muiAppBar: <AppBar>

<AppBar position="${1|fixed,absolute,relative,static,sticky|}" color="${2|primary,default,inherit,secondary,transparent|}">
  <Toolbar$3>
    <Typography variant="h6"$4>
      $5
    </Typography>
  </Toolbar>
</AppBar>

muiAppBarMenu: <AppBar> with menu icon

<AppBar position="${1|fixed,absolute,relative,static,sticky|}" color="${2|primary,default,inherit,secondary,transparent|}">
  <Toolbar$3>
    <IconButton edge="start" color="inherit" aria-label="menu">
      <Menu />
    </IconButton>
    <Typography variant="h6"$4>
      $5
    </Typography>
  </Toolbar>
</AppBar>

muiBottomNavigation: <BottomNavigation>

<BottomNavigation value={$1} onChange={$2}$3>
  $4
</BottomNavigation>

muiBottomNavigationAction: <BottomNavigationAction>

<BottomNavigationAction label="$1" value={$2} icon={$3}$4 />

muiButton: <Button>

<Button variant="${1|text,contained,outlined|}" color="${2|default,inherit,primary,secondary|}"$3>
  $4
</Button>

muiButtonGroup: <ButtonGroup>

<ButtonGroup variant="${1|text,contained,outlined|}" color="${2|default,inherit,primary,secondary|}" aria-label="$3"$4>
  <Button>$5</Button>
  <Button>$6</Button>
  $7
</ButtonGroup>

muiButtonGroupSize: <ButtonGroup> with size

<ButtonGroup variant="${1|text,contained,outlined|}" color="${2|default,inherit,primary,secondary|}" size="${3|small,medium,large|}" aria-label="$4"$5>
  <Button>$6</Button>
  <Button>$7</Button>
  $8
</ButtonGroup>

muiButtonGroupVertical: vertical <ButtonGroup>

<ButtonGroup orientation="vertical" variant="${1|text,contained,outlined|}" color="${2|default,inherit,primary,secondary|}" aria-label="$3"$4>
  <Button>$5</Button>
  <Button>$6</Button>
  $7
</ButtonGroup>

muiButtonSize: <Button> with size

<Button
  variant="${1|text,contained,outlined|}"
  color="${2|default,inherit,primary,secondary|}"
  size="${3|small,medium,large|}"
  $4
>
  $5
</Button>

muiButtonText: text <Button>

<Button color="${1|default,inherit,primary,secondary|}"$2>$3</Button>

muiButtonWithIcon: <Button> with icon and label

<Button
  variant="${1|text,contained,outlined|}"
  color="${2|default,inherit,primary,secondary|}"
  startIcon={$3}
  $4
>
  $5
</Button>

muiCardHeader: <CardHeader>

<CardHeader${1:
  avatar={
    <Avatar aria-label="$2"$3>
      $4
    </Avatar>
  \}}${5:
  action={
    <IconButton aria-label="$6"$7>
      $8
    </IconButton>
  \}}${9:
  title="$10"}${11:
  subheader="$12"}
  $13
/>

muiCardMedia: <CardMedia>

<CardMedia title="$1" image="$2" />

muiCheckboxLabel: <Checkbox> with <FormControlLabel>

Controlled

<FormControlLabel
  label="$1"
  control={
    <Checkbox
      value="$2"
      checked={$3}
      onChange={$4}
      color="${5:primary}"
    />
  }
/>

Uncontrolled

<FormControlLabel
  label="$1"
  control={
    <Checkbox
      value="$2"
      defaultChecked={$3}
      color="${4:primary}"
    />
  }
/>

muiCheckboxLabelPlacement: <Checkbox> with <FormControlLabel>

Controlled

<FormControlLabel
  label="$1"
  labelPlacement="${2|end,start,top,bottom|}"
  control={
    <Checkbox
      value="$3"
      checked={$4}
      onChange={$5}
      color="${6:primary}"
    />
  }
/>

Uncontrolled

<FormControlLabel
  label="$1"
  labelPlacement="${2|end,start,top,bottom|}"
  control={
    <Checkbox
      value="$3"
      defaultChecked={$4}
      color="${5:primary}"
    />
  }
/>

muiContainer: <Container>

<Container maxWidth="${1|xs,sm,md,lg,xl|}"$2>
  $3
</Container>

muiDialog: <Dialog>

<Dialog open={$1} onClose={$2} aria-labelledby={$3}>${4:
  <DialogTitle id={$3\}>
    $5
  </DialogTitle>}${6:
  <DialogContent>${7:
    <DialogContentText>
      $8
    </DialogContentText>}
  </DialogContent>}${9:
  <DialogActions>
    <Button onClick={$10\} color="${11|default,inherit,primary,secondary|}">${12:
      Cancel}
    </Button>
  </DialogActions>}
</Dialog>

muiDialogSimple: <Dialog>

<Dialog open={$1} onClose={$2} aria-labelledby="$3">
  $4
</Dialog>

muiDrawerPermanent: permanent <Drawer>

<Drawer variant="permanent" anchor="${1|left,right,top,bottom|}"$2>
  $3
</Drawer>

muiDrawerPersistent: persistent <Drawer>

<Drawer
  variant="persistent"
  anchor="${1|left,right,top,bottom|}"
  open={$2}
  $3
>
  $4
</Drawer>

muiDrawerTemporary: temporary <Drawer>

<Drawer
  variant="temporary"
  anchor="${1|left,right,top,bottom|}"
  open={$2}
  onClose={$3}
  $4
>
  $5
</Drawer>

muiEndAdornment: end <InputAdornment>

endAdornment={
  <InputAdornment position="end">
    $0
  </InputAdornment>
}

muiExpansionPanel: <ExpansionPanel>

<ExpansionPanel>
  <ExpansionPanelSummary
    expandIcon={<ExpandMore />}
    aria-label="${1:Expand}"
    aria-controls="$2-content"
    id="$2-header"
  >
    <Typography$3>$4</Typography>
  </ExpansionPanelSummary>
  <ExpansionPanelDetails>$5</ExpansionPanelDetails>
</ExpansionPanel>

muiExpansionPanelControlled: controlled <ExpansionPanel>

<ExpansionPanel expanded={$1} onChange={$2}>
  <ExpansionPanelSummary
    expandIcon={<ExpandMore />}
    aria-label="${3:Expand}"
    aria-controls="$4-content"
    id="$4-header"
  >
    <Typography$5>$6</Typography>
  </ExpansionPanelSummary>
  <ExpansionPanelDetails>$7</ExpansionPanelDetails>
</ExpansionPanel>

muiFab: <Fab>

<Fab color="${1|default,inherit,primary,secondary|}" aria-label="$2"$3>
  <$4Icon />
</Fab>

muiFabExtended: <Fab variant="extended">

<Fab variant="extended" color="${1|default,inherit,primary,secondary|}" aria-label="$2"$3>
  <Box marginRight={1}><$4Icon /></Box>
  $5
</Fab>

muiFormControl: <FormControl>

<FormControl$1>
  <FormLabel>$2</FormLabel>
  $0
  <FormHelperText>$3</FormHelperText>
</FormControl>

muiFormControlGroup: <FormControl> with <FormGroup>

<FormControl component=${1:"fieldset"}$2>
  <FormLabel component=${3:"legend"}>$4</FormLabel>
  <FormGroup>
    $0
  </FormGroup>
  <FormHelperText>$5</FormHelperText>
</FormControl>

muiGridContainer: <Grid container>

<Grid container spacing={$1}$2>
  $3
</Grid>

muiGridContainerCenter: <Grid container> with centering

<Grid
  container
  spacing={${1:1}}${2:
  direction="${3|row,row-reverse,column,column-reverse|}"}
  justify="${4:center}"
  alignItems="${5:center}"
  alignContent="${6:center}"${7:
  wrap="${8|nowrap,wrap,wrap-reverse|}"}
  $9
>
  $10
</Grid>

muiGridContainerFull: <Grid container> with all props

<Grid
  container${1:
  spacing={${2:1}\}}${3:
  direction="${4|row,row-reverse,column,column-reverse|}"}${5:
  justify="${6|flex-start,center,flex-end,space-between,space-around,space-evenly|}"}${7:
  alignItems="${8|flex-start,center,flex-end,stretch,baseline|}"}${9:
  alignContent="${10|stretch,center,flex-start,flex-end,space-between,space-around|}"}${11:
  wrap="${12|nowrap,wrap,wrap-reverse|}"}
  $13
>
  $14
</Grid>

muiGridListSubheader: <GridList> subheader

<GridListTile cols={${1:2}} style={{ height: 'auto' }}>
  <ListSubheader component="div">$2</ListSubheader>
</GridListTile>

muiGridListTilebar: <GridListTileBar>

<GridListTileBar${1:
  title="$2"}${3:
  subtitle="$4"}${5:
  actionIcon={
    <IconButton aria-label="$6"$7>
      $8
    </IconButton>
  \}}
/>

muiIconButton: <IconButton>

<IconButton aria-label="$1" onClick={$2}$3>
  $4
</IconButton>

muiMenu: <Menu>

<Menu id="$1" anchorEl={$2} keepMounted open={Boolean($2)} onClose={$3}$4>
  $5
</Menu>

muiMenuItem: <MenuItem>

<MenuItem onClick={$1}$2>$3</MenuItem>

muiMenuPopupState: <Menu> for material-ui-popup-state

<Menu
  id="$1"
  keepMounted
  {...bindMenu(${2:popupState})}
  $3
>
  $4
</Menu>

muiRadioGroup: <FormControl> with <RadioGroup>

<FormControl component=${1:"fieldset"}$2>
  <FormLabel component=${3:"legend"}>$4</FormLabel>
  <RadioGroup aria-label="$5" name="$6" value={$7} onChange={$8}>$0</RadioGroup>
  <FormHelperText>$9</FormHelperText>
</FormControl>

muiRadioLabel: <Radio> with <FormControlLabel>

<FormControlLabel value="$1" label="$2" control={<Radio$3 />} />

muiRadioLabelPlacement: <Radio> with <FormControlLabel> with labelPlacement

<FormControlLabel
  value="$1"
  label="$2"
  labelPlacement="${3|end,start,top,bottom|}"
  control={<Radio$4 />}
/>

muiSelectItem: <MenuItem> inside <Select>

<MenuItem value={$1}$2>$3</MenuItem>

muiSliderContinuous: <Slider> with continuous values

Controlled

<Slider
  value={$1}
  onChange={$2}
  aria-labelledby="$3"
  min={${4:0}}
  max={${5:100}}
  $6
/>

Uncontrolled

<Slider
  defaultValue={$1}
  aria-labelledby="$2"
  min={${3:0}}
  max={${4:100}}
  $5
/>

muiSliderDiscrete: <Slider> with discrete values

Controlled

<Slider
  value={$1}
  onChange={$2}
  aria-labelledby="$3"
  step={${4:1}}
  marks
  min={${5:0}}
  max={${6:100}}
  $7
/>

Uncontrolled

<Slider
  defaultValue={$1}
  aria-labelledby="$2"
  step={${3:1}}
  marks
  min={${4:0}}
  max={${5:100}}
  $6
/>

muiSnackbar: <Snackbar>

<Snackbar
  anchorOrigin={{ vertical: '$1', horizontal: '$2' }}
  open={$3}
  onClose={$4}
  message="$5"${6:
  action={
    <IconButton size="small" aria-label="close" color="inherit" onClick={$4\}>
      <Close fontSize="small" />
    </IconButton>
  \}}
/>

muiSnackbarContent: <SnackbarContent>

<SnackbarContent message="$1" action={$2} />

muiStartAdornment: start <InputAdornment>

startAdornment={
  <InputAdornment position="start">
    $0
  </InputAdornment>
}

muiStep: <Step>

<Step key={$1} completed={$2}$3>
  <StepLabel>$4</StepLabel>
</Step>

muiStepContent: <Step> with <StepContent>

<Step key={$1} completed={$2}$3>
  <StepLabel>$4</StepLabel>
  <StepContent>
    $5
  </StepContent>
</Step>

muiStepOptional: optional <Step>

<Step key={$1} completed={$2}$3>
  <StepLabel
    optional={<Typography variant="caption">${4:Optional}</Typography>}
  >
    $5
  </StepLabel>
</Step>

muiStepper: <Stepper>

<Stepper activeStep={$1}>
  $2
</Stepper>

muiSwipeableViews: <SwipeableViews>

<SwipeableViews
  axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
  index={$1}
  onChangeIndex={$2}
  $3
>
  $0
</SwipeableViews>

muiSwitch: <Switch>

Controlled

<Switch
  value="$1"
  checked={$2}
  onChange={$3}
  inputProps={{ "aria-label": '$4' }}
  $5
/>

Uncontrolled

<Switch
  value="$1"
  defaultChecked={$2}
  inputProps={{ "aria-label": '$3' }}
  $4
/>

muiSwitchLabel: <Switch> with <FormControlLabel>

Controlled

<FormControlLabel
  label="$1"
  control={
    <Switch
      value="$2"
      checked={$3}
      onChange={$4}
      $5
    />
  }
/>

Uncontrolled

<FormControlLabel
  label="$1"
  control={
    <Switch
      value="$2"
      defaultChecked={$3}
      $4
    />
  }
/>

muiSwitchLabelPlacement: <Switch> with <FormControlLabel> with labelPlacement

Controlled

<FormControlLabel
  label="$1"
  labelPlacement="${2|end,start,top,bottom|}"
  control={
    <Switch
      value="$3"
      checked={$4}
      onChange={$5}
      $6
    />
  }
/>

Uncontrolled

<FormControlLabel
  label="$1"
  labelPlacement="${2|end,start,top,bottom|}"
  control={
    <Switch
      value="$3"
      defaultChecked={$4}
      $5
    />
  }
/>

muiTabPanel: <TabPanel>

<TabPanel value={$1} index={$2} ${3:dir={theme.direction\}}$4>
  $5
</TabPanel>

muiTabs: <Tabs>

<AppBar position="static" color="${1|primary,default,inherit,secondary,transparent|}"$2>
  <Tabs value={$3} onChange={$4} aria-label="$5"$6>
    $7
  </Tabs>
</AppBar>

muiTabsScrollable: scrollable <Tabs>

<AppBar position="static" color="${1|primary,default,inherit,secondary,transparent|}"$2>
  <Tabs
    value={$3}
    onChange={$4}
    aria-label="$5"
    variant="scrollable"
    scrollButtons="${6:auto}"
    $7
  >
    $8
  </Tabs>
</AppBar>

muiTextField: <TextField>

Controlled

<TextField
  id="$1"
  label="$2"
  value={$3}
  onChange={$4}
  $5
/>

Uncontrolled

<TextField
  id="$1"
  label="$2"
  defaultValue={$3}
  $4
/>

muiTextFieldMore: <TextField> with more props

Controlled

<TextField
  id="$1"
  label="$2"${3:
  variant="${4|standard,outlined,filled|}"}${5:
  color="${6|primary,secondary|}"}${7:
  margin="${8|none,dense,normal|}"}${9:
  sizes="${10|small,medium|}"}
  value={$11}
  onChange={$12}
  $13
/>

Uncontrolled

<TextField
  id="$1"
  label="$2"${3:
  variant="${4|standard,outlined,filled|}"}${5:
  color="${6|primary,secondary|}"}${7:
  margin="${8|none,dense,normal|}"}${9:
  sizes="${10|small,medium|}"}
  defaultValue={$11}
  $12
/>

muiTextFieldSelect: <TextField select>

Controlled

<TextField
  id="$1"
  label="$2"
  select
  value={$3}
  onChange={$4}
  $5
/>

Uncontrolled

<TextField
  id="$1"
  label="$2"
  select
  defaultValue={$3}
  $4
/>

muiTextFieldVariant: <TextField> with variant

Controlled

<TextField
  id="$1"
  label="$2"
  variant="${3|standard,outlined,filled|}"
  value={$4}
  onChange={$5}
  $6
/>

Uncontrolled

<TextField
  id="$1"
  label="$2"
  variant="${3|standard,outlined,filled|}"
  defaultValue={$4}
  $5
/>

muiTooltip: <Tooltip>

<Tooltip title="$1"$2>
  $TM_SELECTED_TEXT$0
</Tooltip>

muiTypography: <Typography>

<Typography variant="${1|h1,h2,h3,h4,h5,h6,subtitle1,subtitle2,body1,body2,caption,button,overline,srOnly,inherit|}" ${2:color="${3|initial,inherit,primary,secondary,textPrimary,textSecondary,error|}"}$4>$TM_SELECTED_TEXT$0</Typography>