Material-UI Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of Material-ui forms.

Inputs

Default

import React from "react";
// @material-ui/core components
import OutlinedInput from "@material-ui/core/OutlinedInput";
// @material-ui/icons components

// core components

function Example() {
  return (
    <>
      <OutlinedInput fullWidth placeholder="Default input" />
    </>
  );
}

export default Example;

Alternative

If you want to use forms on grayish background colors, you can use this beautiful alternative style which removes the borders and it is emphasized only by its shadow.

import React from "react";
// @material-ui/core components
import FilledInput from "@material-ui/core/FilledInput";
// @material-ui/icons components

// core components

function Example() {
  return (
    <>
      <FilledInput fullWidth placeholder="Alternative input" />
    </>
  );
}

export default Example;

Flush

Remove all borders and shadows so you can use it inside other elements:

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import InputBase from "@material-ui/core/InputBase";
// @material-ui/icons components

// core components

const useStyles = makeStyles({
  input: {
    border: 0,
    background: "transparent",
  },
});

function Example() {
  const classes = useStyles();
  const inputClasses = {
    input: classes.input,
  }
  return (
    <>
      <InputBase
        classes={inputClasses}
        fullWidth
        placeholder="Flushed input"
      />
    </>
  );
}

export default Example;

Muted

Remove all borders and shadows so you can use it inside other elements:

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import InputBase from "@material-ui/core/InputBase";
// @material-ui/icons components

// core components

const useStyles = makeStyles((theme) => ({
  input: {
    borderColor: theme.palette.background.default,
    backgroundColor: theme.palette.background.default,
    boxShadow: "none",
  },
}));

function Example() {
  const classes = useStyles();
  const inputClasses = {
    input: classes.input,
  }
  return (
    <>
      <InputBase
        classes={inputClasses}
        fullWidth
        placeholder="Muted input"
      />
    </>
  );
}

export default Example;

Form controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

import React from "react";
// @material-ui/core components
import FormControl from "@material-ui/core/FormControl";
import FormGroup from "@material-ui/core/FormGroup";
import FormLabel from "@material-ui/core/FormLabel";
import MenuItem from "@material-ui/core/MenuItem";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import Select from "@material-ui/core/Select";
// @material-ui/icons components

// core components

function Example() {
  return (
    <>
      <FormGroup>
        <FormLabel>Email address</FormLabel>
        <OutlinedInput fullWidth type="email" placeholder="Default input" />
      </FormGroup>
      <FormGroup>
        <FormLabel>Example select</FormLabel>
        <FormControl variant="outlined" fullWidth>
          <Select>
            <MenuItem value={1}>1</MenuItem>
            <MenuItem value={2}>2</MenuItem>
            <MenuItem value={3}>3</MenuItem>
            <MenuItem value={4}>4</MenuItem>
            <MenuItem value={5}>5</MenuItem>
          </Select>
        </FormControl>
      </FormGroup>
      <FormGroup>
        <FormLabel>Example multiple select</FormLabel>
        <FormControl variant="outlined" fullWidth>
          <Select multiple defaultValue={[]}>
            <MenuItem value={1}>1</MenuItem>
            <MenuItem value={2}>2</MenuItem>
            <MenuItem value={3}>3</MenuItem>
            <MenuItem value={4}>4</MenuItem>
            <MenuItem value={5}>5</MenuItem>
          </Select>
        </FormControl>
      </FormGroup>
      <FormGroup>
        <FormLabel>Example textarea</FormLabel>
        <OutlinedInput fullWidth multiline rows="4" />
      </FormGroup>
    </>
  );
}

export default Example;

File browser

import React from "react";
// @material-ui/core components
import FormGroup from "@material-ui/core/FormGroup";
import FormLabel from "@material-ui/core/FormLabel";
import InputAdornment from "@material-ui/core/InputAdornment";
import OutlinedInput from "@material-ui/core/OutlinedInput";
// @material-ui/icons components

// core components

function Example() {
  return (
    <>
      <FormGroup>
        <FormLabel>Email address</FormLabel>
        <OutlinedInput
          fullWidth
          type="file"
          placeholder="Default input"
          endAdornment={<InputAdornment position="end">Browse</InputAdornment>}
        />
      </FormGroup>
    </>
  );
}

export default Example;

HTML5 inputs

import React from "react";
// @material-ui/core components
import { useTheme } from "@material-ui/core/styles";
import FormGroup from "@material-ui/core/FormGroup";
import FormLabel from "@material-ui/core/FormLabel";
import OutlinedInput from "@material-ui/core/OutlinedInput";
// @material-ui/icons components

// core components

function Example() {
  const theme = useTheme();
  return (
    <>
      <FormGroup>
        <FormLabel>Text</FormLabel>
        <OutlinedInput fullWidth type="text" />
      </FormGroup>
      <FormGroup>
        <FormLabel>Search</FormLabel>
        <OutlinedInput fullWidth type="search" />
      </FormGroup>
      <FormGroup>
        <FormLabel>Email</FormLabel>
        <OutlinedInput fullWidth type="email" />
      </FormGroup>
      <FormGroup>
        <FormLabel>Url</FormLabel>
        <OutlinedInput fullWidth type="url" />
      </FormGroup>
      <FormGroup>
        <FormLabel>Phone</FormLabel>
        <OutlinedInput fullWidth type="tel" />
      </FormGroup>
      <FormGroup>
        <FormLabel>Password</FormLabel>
        <OutlinedInput fullWidth type="password" />
      </FormGroup>
      <FormGroup>
        <FormLabel>Number</FormLabel>
        <OutlinedInput fullWidth type="number" />
      </FormGroup>
      <FormGroup>
        <FormLabel>Datetime</FormLabel>
        <OutlinedInput fullWidth type="datetime-local" />
      </FormGroup>
      <FormGroup>
        <FormLabel>Date</FormLabel>
        <OutlinedInput fullWidth type="date" />
      </FormGroup>
      <FormGroup>
        <FormLabel>Month</FormLabel>
        <OutlinedInput fullWidth type="month" />
      </FormGroup>
      <FormGroup>
        <FormLabel>Week</FormLabel>
        <OutlinedInput fullWidth type="week" />
      </FormGroup>
      <FormGroup>
        <FormLabel>Time</FormLabel>
        <OutlinedInput fullWidth type="time" />
      </FormGroup>
      <FormGroup>
        <FormLabel>Color</FormLabel>
        <OutlinedInput
          fullWidth
          type="color"
          defaultValue={theme.palette.primary.main}
        />
      </FormGroup>
    </>
  );
}

export default Example;

Sizing

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import OutlinedInput from "@material-ui/core/OutlinedInput";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/forms.js";

const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  return (
    <>
      <OutlinedInput fullWidth type="text" className={classes.inputLarge} />
      <OutlinedInput fullWidth type="text" />
      <OutlinedInput fullWidth type="text" className={classes.inputSmall} />
    </>
  );
}

export default Example;

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/forms.js";

const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  return (
    <>
      <FormControl variant="outlined" fullWidth>
        <Select className={classes.inputLarge}></Select>
      </FormControl>
      <FormControl variant="outlined" fullWidth>
        <Select></Select>
      </FormControl>
      <FormControl variant="outlined" fullWidth>
        <Select className={classes.inputSmall}></Select>
      </FormControl>
    </>
  );
}

export default Example;

Custom forms

For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

Checkboxes

Check this custom checkbox

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/forms.js";

const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  const formClasses = {
    root: classes.formControlCheckboxLabelRoot,
    label: classes.formControlCheckboxLabelLabel,
  }
  return (
    <>
      <FormControlLabel
        value="end"
        control={<Checkbox color="primary" />}
        label="Check this custom checkbox"
        labelPlacement="end"
        classes={formClasses}
      />
    </>
  );
}

export default Example;

Radios

Toggle this custom radio

Or toggle this other custom radio

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/forms.js";

const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  const formClasses = {
    root: classes.formControlCheckboxLabelRoot,
    label: classes.formControlCheckboxLabelLabel,
  }
  return (
    <>
      <RadioGroup aria-label="gender" name="example-radio">
        <FormControlLabel
          control={<Radio color="primary" />}
          label="Toggle this custom radio"
          value="1"
          labelPlacement="end"
          classes={formClasses}
        />
        <FormControlLabel
          control={<Radio color="primary" />}
          label="Or toggle this other custom radio"
          labelPlacement="end"
          value="2"
          classes={formClasses}
        />
      </RadioGroup>
    </>
  );
}

export default Example;

Inline

Toggle this custom radio

Or toggle this other custom radio

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/forms.js";

const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  const formClasses = {
    root: classes.formControlCheckboxLabelRoot,
    label: classes.formControlCheckboxLabelLabel,
  }
  return (
    <>
      <Box
        component={RadioGroup}
        aria-label="gender"
        name="example-radio"
        flexDirection="row!important"
      >
        <FormControlLabel
          control={<Radio color="primary" />}
          label="Toggle this custom radio"
          value="1"
          labelPlacement="end"
          classes={formClasses}
        />
        <FormControlLabel
          control={<Radio color="primary" />}
          label="Or toggle this other custom radio"
          labelPlacement="end"
          value="2"
          classes={formClasses}
        />
      </Box>
    </>
  );
}

export default Example;

Disabled

Check this custom checkbox

Toggle this custom radio

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Checkbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Radio from "@material-ui/core/Radio";
// @material-ui/icons components

// core components
import componentStyles from "assets/theme/components/forms.js";

const useStyles = makeStyles(componentStyles);

function Example() {
  const classes = useStyles();
  const formClasses = {
    root: classes.formControlCheckboxLabelRoot,
    label: classes.formControlCheckboxLabelLabel,
  };
  return (
    <>
      <FormControlLabel
        disabled
        value="end"
        control={<Checkbox color="primary" />}
        label="Check this custom checkbox"
        labelPlacement="end"
        classes={formClasses}
      />
      <FormControlLabel
        disabled
        value="end"
        control={<Radio color="primary" />}
        label="Check this custom checkbox"
        labelPlacement="end"
        classes={formClasses}
      />
    </>
  );
}

export default Example;

Toggles

import React from "react";
// @material-ui/core components
import Switch from "@material-ui/core/Switch";
// @material-ui/icons components

// core components

export default function Example() {
  return (
    <Switch
      color="primary"
      name="checkedB"
    />
  );
}