Examples and usage guidelines for form control styles, layout
options, and custom components for creating a wide variety of
Material-ui forms.
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 ;
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 ;
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 ;
Large select
Default select
Small select
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 ;
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
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
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
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
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 "
/>
);
}