Nextjs Core Inputs

Pro Component

Style

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

Example

With Floating Label We'll never share your email with anyone else.

Success input

Error input

import React from "react";

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

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

Props

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