Inputs

We've decided to make it a bit easier to create and use Material-UI's inputs and created a CostumInput component so that you don't have to write lots of code.

Styles

You will find the styles for this component in
styles/jss/nextjs-material-kit-pro/components/customInputStyle.js.

Example

// @material-ui/core components
import InputAdornment from "@material-ui/core/InputAdornment";
// @material-ui icons
import People from '@material-ui/icons/People';
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import CustomInput from 'components/CustomInput/CustomInput.js';

<GridContainer>
<GridItem xs={12} sm={12} md={4}>
  <CustomInput
    labelText="Disabled"
    id="disabled"
    formControlProps={{
      fullWidth: true
    }}
    inputProps={{
      disabled: true
    }}
  />
</GridItem>
<GridItem xs={12} sm={12} md={4}>
  <CustomInput
    id="regular"
    inputProps={{
      placeholder: "Regular"
    }}
    formControlProps={{
      fullWidth: true
    }}
  />
</GridItem>
<GridItem xs={12} sm={12} md={4}>
  <CustomInput
    labelText="With floating label"
    id="float"
    formControlProps={{
      fullWidth: true
    }}
  />
</GridItem>
<GridItem xs={12} sm={12} md={4}>
  <CustomInput
    labelText="Success input"
    id="success"
    success
    formControlProps={{
      fullWidth: true
    }}
  />
</GridItem>
<GridItem xs={12} sm={12} md={4}>
  <CustomInput
    labelText="Error input"
    id="error"
    error
    formControlProps={{
      fullWidth: true
    }}
  />
</GridItem>
<GridItem xs={12} sm={12} md={4}>
  <CustomInput
    labelText="With material Icons"
    id="material"
    formControlProps={{
      fullWidth: true
    }}
    inputProps={{
      endAdornment: (<InputAdornment position="end"><People/></InputAdornment>)
    }}
  />
</GridItem>
</GridContainer>

CustomInput.propTypes = {
  labelText: PropTypes.node,
  labelProps: PropTypes.object,
  id: PropTypes.string,
  inputProps: PropTypes.object,
  formControlProps: PropTypes.object,
  inputRootCustomClasses: PropTypes.string,
  error: PropTypes.bool,
  success: PropTypes.bool,
  white: PropTypes.bool
};

Props

To see what props you can pass inside the inputProps, labelProps, formControlProps please check out the material-ui input documentation, material-ui label documentation and material-ui form controll documentation.