Category: JavaScript

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add text fields with Material UI.

Sizes

We can change the size of a text field with the size prop.

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div className="App">
      <TextField label="Size" id="small" defaultValue="Small" size="small" />
    </div>
  );
}

to add a text field with the size small .

Layout

We can layout our text fields our way.

To do that, we can write:

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

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: "25ch"
  }
}));

export default function App() {
  const classes = useStyles();

return (
    <>
      <div>
        <TextField
          id="filled-full-width"
          label="Label"
          style={{ margin: 8 }}
          placeholder="Placeholder"
          helperText="Full width!"
          fullWidth
          margin="normal"
          InputLabelProps={{
            shrink: true
          }}
          variant="filled"
        />
        <TextField
          label="None"
          id="filled-margin-none"
          defaultValue="foo"
          className={classes.textField}
          helperText="foo"
        />
        <TextField
          label="Dense"
          style={{ margin: 3 }}
          id="filled-margin-dense"
          defaultValue="bar"
          className={classes.textField}
          helperText="bar"
          margin="dense"
        />
      </div>
    </>
  );
}

to add text fields.

We have one full-width text field at the top and 2 shorter ones at the bottom.

They have the usual props, which have the helperText for the hint.

margin have the margin.

We also have some styles to change the margins.

className have the class names.

placeholder have the placeholder for the text fields.

variant can be filled or not.

margin can be smaller than the default with dense .

Uncontrolled vs Controlled

Text fields can be uncontrolled, which means that it doesn’t have any state attached to it.

Or it can be controlled, which means that it has state attached to it.

To make a controlled text field, we can add the value and onChange props to the TextField .

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  const [name, setName] = React.useState("james");
  const handleChange = event => {
    setName(event.target.value);
  };
  return (
    <>
      <div>
        <TextField
          id="standard-name"
          label="Name"
          value={name}
          onChange={handleChange}
        />
      </div>
    </>
  );
}

We have the name state which is passed into the value prop.

And the handleChange function which is passed into the onChange prop.

Then when we type something in, the handleChange function will run and call setName to update the name state.

Components

A TextField is made of smaller components.

They include FormControl , Input , FilledInput , InputLabel , OutlinedInput and FormHelperText .

For instance, we can substitute a TextField with:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
export default function App() {
  const [name, setName] = React.useState("james");
  const handleChange = event => {
    setName(event.target.value);
  };
  return (
    <>
      <div>
        <FormControl>
          <InputLabel htmlFor="input">Name</InputLabel>
          <Input id="input" value={name} onChange={handleChange} />
        </FormControl>
      </div>
    </>
  );
}

We have an Input for the input box and InputLabel for the label for the input box.

To add hint text, we can use the FormHelperText component:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import FormHelperText from "@material-ui/core/FormHelperText";

export default function App() {
  const [name, setName] = React.useState("james");
  const handleChange = event => {
    setName(event.target.value);
  };
  return (
    <>
      <div>
        <FormControl>
          <InputLabel htmlFor="input">Name</InputLabel>
          <Input id="input" value={name} onChange={handleChange} />
          <FormHelperText>enter your name</FormHelperText>
        </FormControl>
      </div>
    </>
  );
}

We can also use the OutlinedInput and FilledInput components to add input boxes with those varieties:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";
import FormHelperText from "@material-ui/core/FormHelperText";

export default function App() {
  const [name, setName] = React.useState("james");
  const handleChange = event => {
    setName(event.target.value);
  };
  return (
    <>
      <div>
        <FormControl>
          <InputLabel htmlFor="input">Name</InputLabel>
          <OutlinedInput
            id="input"
            value={name}
            onChange={handleChange}
            label="Name"
          />
          <FormHelperText>enter your name</FormHelperText>
        </FormControl>
      </div>
    </>
  );
}

to add an input box with the outline to the box.

And we can use the FilledInput to add an input box with the background:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import FilledInput from "@material-ui/core/FilledInput";
import InputLabel from "@material-ui/core/InputLabel";
import FormHelperText from "@material-ui/core/FormHelperText";

export default function App() {
  const [name, setName] = React.useState("james");
  const handleChange = event => {
    setName(event.target.value);
  };
  return (
    <>
      <div>
        <FormControl>
          <InputLabel htmlFor="input">Name</InputLabel>
          <FilledInput id="input" value={name} onChange={handleChange} />
          <FormHelperText>enter your name</FormHelperText>
        </FormControl>
      </div>
    </>
  );
}

Conclusion

A TextField is composed of many form components.

Therefore, we can add those instead of a TextField .

We can also make a text field and controller input.

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add text fields with Material UI.

Text Field

Text fields are form controls to let users enter and edit text.

To add them, we use the TextField component.

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div className="App">
      <TextField label="Standard" />
    </div>
  );
}

to add a basic text field.

label is displayed as the placeholder.

We can also add the variant prop to change the styling.

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div className="App">
      <TextField label="filled" variant="filled" />
    </div>
  );
}

to add a text field with a background color.

Form Props

We can add the required prop to make the field required.

disabled disables the text field.

type has the input type.

helperText lets us show users hints.

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div className="App">
      <TextField label="required" required helperText="required field" />
    </div>
  );
}

to add helper text to our field, which will be displayed at the bottom.

required adds an asterisk to the label to indicate that it’s required.

Validation

The error prop lets us toggle the error state.

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <div className="App">
      <TextField label="error" error />
    </div>
  );
}

to show a text field with errors in it.

It’ll be all red.

Select

The select prop makes the text field use the Select component internally.

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";

const fruits = [
  { value: "apple", label: "Apple" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" }
];

export default function App() {
  const [fruit, setFruit] = React.useState("apple");

  const handleChange = event => {
    setFruit(event.target.value);
  };

  return (
    <div className="App">
      <TextField
        select
        label="Select"
        value={fruit}
        onChange={handleChange}
        helperText="Please select your fruit"
      >
        {fruits.map(option => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </TextField>
    </div>
  );
}

We create a dropdown with the TextField component.

label has the label.

value is the selected value.

onChange runs when we change the selection, which we can use to set the select value state.

Inside the TextField , we have the MenuItem components to display the options.

Icons

We can add icons to our TextFields .

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import AccountCircle from "@material-ui/icons/AccountCircle";

export default function App() {
  return (
    <div className="App">
      <Grid container spacing={1} alignItems="flex-end">
        <Grid item>
          <AccountCircle />
        </Grid>
        <Grid item>
          <TextField id="input-with-icon-grid" label="input" />
        </Grid>
      </Grid>
    </div>
  );
}

to add a text field beside an icon.

AccountCircle is the icon.

The TextField is to the right of it.

Input Adornments

We can use the InputAdornment component to add prefix, suffix or an action to an input.

For example, we can write:

import React from "react";
import clsx from "clsx";
import InputAdornment from "@material-ui/core/InputAdornment";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  margin: {
    margin: theme.spacing(1)
  },
  textField: {
    width: "25ch"
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <TextField
        label="length"
        id="filled-start-adornment"
        className={clsx(classes.margin, classes.textField)}
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">meters</InputAdornment>
          )
        }}
      />
    </div>
  );
}

We add a TextField with an InputAdornment .

position set to start which means that we add a prefix to the input.

It’ll be displayed on the left.

We have a class to add some margins between the prefix and the input box.

Conclusion

We can add text fields to let users enter text.

There are many options we can change to style it the way we want.

Also, we can icons and text beside the input box.

There are also styles for errors.

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add switches with Material UI.

Switches

Switches are toggles that let us set something on or off.

To add one, we use the Switch component.

For instance, we can write:

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

export default function App() {
  const [checked, setChecked] = React.useState();

  const handleChange = event => {
    setChecked(event.target.checked);
  };

  return (
    <div className="App">
      <Switch checked={checked} onChange={handleChange} name="checked" />
    </div>
  );
}

We set the checked prop with the checked state.

onChange has a function that runs when we click on the toggle.

event.target.checked has the checked value so that we use it to change the checked state.

We can change the color with the color prop.

For example, we can write:

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

export default function App() {
  const [checked, setChecked] = React.useState();

  const handleChange = event => {
    setChecked(event.target.checked);
  };

  return (
    <div className="App">
      <Switch
        color="primary"
        checked={checked}
        onChange={handleChange}
        name="checked"
      />
    </div>
  );
}

With the color prop, we changed the color.

primary is purple.

Also, we can disable it with the disabled prop.

For example, we can write:

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

export default function App() {
  const [checked, setChecked] = React.useState();

  const handleChange = event => {
    setChecked(event.target.checked);
  };

  return (
    <div className="App">
      <Switch
        disabled
        checked={checked}
        onChange={handleChange}
        name="checked"
      />
    </div>
  );
}

With the disabled prop, users can’t interact with it.

Switch with FormControlLabel

To add a label with the switch, we can use the FormControlLabel component.

For example, we can write:

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

export default function App() {
  const [checked, setChecked] = React.useState();

  const handleChange = event => {
    setChecked(event.target.checked);
  };

  return (
    <div className="App">
      <FormControlLabel
        control={
          <Switch checked={checked} onChange={handleChange} name="checked" />
        }
        label="switch"
      />
    </div>
  );
}

to add a switch with a label to the right.

The label prop is the text for the label.

Switches with FormGroup

FormGroup s let us wrap a bunch of for,m controls into a group.

We can use these with switches.

For instance, we can write:

import React from "react";
import Switch from "@material-ui/core/Switch";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormLabel from "@material-ui/core/FormLabel";
import FormControl from "@material-ui/core/FormControl";
import FormGroup from "@material-ui/core/FormGroup";

export default function App() {
  const [checked, setChecked] = React.useState();

  const handleChange = event => {
    setChecked(event.target.checked);
  };

  return (
    <div className="App">
      <FormControl component="fieldset">
        <FormLabel component="legend">choose</FormLabel>
        <FormGroup>
          <FormControlLabel
            control={
              <Switch
                checked={checked}
                onChange={handleChange}
                name="checked"
              />
            }
            label="switch"
          />
        </FormGroup>
      </FormControl>
    </div>
  );
}

We have a FormGroup surrounding our FormControlLabel for the switch.

Sizes

We can change the size with the size prop.

For example, we can write:

import React from "react";
import Switch from "@material-ui/core/Switch";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormLabel from "@material-ui/core/FormLabel";
import FormControl from "@material-ui/core/FormControl";
import FormGroup from "@material-ui/core/FormGroup";

export default function App() {
  const [checked, setChecked] = React.useState();

  const handleChange = event => {
    setChecked(event.target.checked);
  };

  return (
    <div className="App">
      <FormControlLabel
        control={
          <Switch size="small" checked={checked} onChange={handleChange} />
        }
        label="Small"
      />
    </div>
  );
}

to add a small switch.

We set size to small to make it small.

Customizable Switch

We can customize our switch with our own classes.

For example, we can write:

import React from "react";
import Switch from "@material-ui/core/Switch";
import { makeStyles } from "@material-ui/core/styles";
import { yellow } from "@material-ui/core/colors";

const useStyles = makeStyles({
  switchBase: {
    color: yellow[300],
    "&$checked": {
      color: yellow[500]
    },
    "&$checked + $track": {
      backgroundColor: yellow[500]
    }
  },
  checked: {},
  track: {}
});

export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <Switch
        focusVisibleClassName={classes.focusVisible}
        disableRipple
        classes={{
          root: classes.root,
          switchBase: classes.switchBase,
          thumb: classes.thumb,
          track: classes.track,
          checked: classes.checked
        }}
      />
    </div>
  );
}

to make a switch with our own classes.

We have an object with switchBase property with styles for the color when it’s checked.

We set the color to yellow if it’s checked.

The background is also set to yellow.

Then we use the useStyles hook to get the classes and apply them to our Switch .

We can also pass any props into our Switch component as we wish.

Conclusion

We can add switches with different styles to let us add toggles for users to use.

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to add radio buttons, dropdowns, and sliders with Material UI.

Show Error

To show errors with radio buttons, we can pass in an error prop to it.

For instance, we can write:

import React from "react";
import Radio from "@material-ui/core/Radio";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormLabel from "@material-ui/core/FormLabel";
import FormControl from "@material-ui/core/FormControl";
import FormHelperText from "@material-ui/core/FormHelperText";
import Button from "@material-ui/core/Button";
import RadioGroup from "@material-ui/core/RadioGroup";

export default function App() {
  const [value, setValue] = React.useState("");
  const [error, setError] = React.useState(false);
  const [helperText, setHelperText] = React.useState("");

  const handleRadioChange = event => {
    setValue(event.target.value);
    setHelperText(" ");
    setError(false);
  };

  const handleSubmit = event => {
    event.preventDefault();

    if (value === "2") {
      setHelperText("right");
      setError(false);
    } else if (value === "3") {
      setHelperText("wrong");
      setError(true);
    } else {
      setHelperText("Please select an option.");
      setError(true);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <FormControl component="fieldset" error={error}>
        <FormLabel component="legend">What's 1 + 1?</FormLabel>
        <RadioGroup name="quiz" value={value} onChange={handleRadioChange}>
          <FormControlLabel value="2" control={<Radio />} label="2" />
          <FormControlLabel value="3" control={<Radio />} label="3" />
        </RadioGroup>
        <FormHelperText>{helperText}</FormHelperText>
        <Button type="submit" variant="outlined" color="primary">
          Check Answer
        </Button>
      </FormControl>
    </form>
  );
}

We have the value state to set the value that the user selects as the value.

In App , we return a form with the FormComtrol compknent to wrap around the radio buttons.

RadioGroup have the radio button groups.

FormControlLabel gave the label with the radio button inside.

When we click the button, the handeSubmit function is run.

In the function, we call preventDefault to stop the default submission behavior.

Then we check if the user picked a valid choice.

We set the helper text and the error state so that we can pass that to the error prop.

The helper text is displayed between the radio buttons and the check answer button.

Select

We can add the Select component to add a select dropdown.

For instance, we can write:

import React from "react";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

export default function App() {
  const [fruit, setFruit] = React.useState("");

  const handleChange = event => {
    setFruit(event.target.value);
  };

  return (
    <form>
      <FormControl>
        <InputLabel id="fruit-label">fruit</InputLabel>
        <Select
          labelId="fruit-label"
          id="fruit"
          value={fruit}
          onChange={handleChange}
        >
          <MenuItem value="apple">Apple</MenuItem>
          <MenuItem value="orange">Orange</MenuItem>
          <MenuItem value="grape">Grape</MenuItem>
        </Select>
      </FormControl>
    </form>
  );
}

to add a dropdown along with a label.

InputLabel lets us add a label for the dropdown.

Select lets us add a dropdown.

labelId of Select should match with the id of the InputLabel .

Native Select

To make the select dropdown display as a native dropdown, we can use the native prop on the Select .

For example, we can write:

import React from "react";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

export default function App() {
  const [fruit, setFruit] = React.useState("");

  const handleChange = event => {
    setFruit(event.target.value);
  };

  return (
    <form>
      <FormControl>
        <Select
          native
          id="fruit"
          value={fruit}
          onChange={handleChange}
        >
          <option value="">Select one</option>
          <option value="apple">Apple</option>
          <option value="orange">Orange</option>
          <option value="grape">Grape</option>
        </Select>
      </FormControl>
    </form>
  );
}

We add the native prop to the Select .

And we replaced the MenuItem with the option element.

We also removed the label, so that it won’t overlap with the dropdown.

Slider

We can add a slider to add a numeric input that’s set by dragging a slider.

To add one, we can use the Slider component.

For instance, we can write:

import React from "react";
import Slider from "@material-ui/core/Slider";

export default function App() {
  const [value, setValue] = React.useState(10);

  const handleChange = event => {
    setValue(event.target.value);
  };

  return (
    <form>
      <Slider
        value={value}
        onChange={handleChange}
      />
    </form>
  );
}

to add a numerical slider.

We have the value state which we set as the value prop.

Also, we have the onChange prop set to our handleChange function.

We call setValue with the slider’s selected value to update the value state.

Now our slider’s handle can be dragged to change its selected value.

Conclusion

We can add a slider by using the Slider component.

Also, we can show errors with radio buttons.

Dropdowns can be added with the Select component.

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to customize text fields with Material UI.

Inputs

We can add input boxes without all the other parts.

For example, we can write:

import React from "react";
import Input from "@material-ui/core/Input";

export default function App() {
  return (
    <>
      <div>
        <Input
          placeholder="Placeholder"
          inputProps={{ "aria-label": "description" }}
        />
      </div>
    </>
  );
}

to add an Input component without all the other components.

Color

To change the color of a TextField , we can set the color prop.

For example, we can write:

import React from "react";
import TextField from "@material-ui/core/TextField";

export default function App() {
  return (
    <>
      <div>
        <TextField
          id="filled-primary"
          label="Filled primary"
          variant="filled"
          color="primary"
        />
      </div>
    </>
  );
}

We set the color prop to primary to set the color.

Customized Text Field

We can customize a text field by passing our own style to it.

TextField has an InputProps prop which takes an object with some propeerties.

For instance, we can write;

import React from "react";
import TextField from "@material-ui/core/TextField";
import { fade, makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    border: "1px solid brown",
    overflow: "hidden",
    borderRadius: 3,
    backgroundColor: "orange",
    transition: theme.transitions.create(["border-color", "box-shadow"]),
    "&:hover": {
      backgroundColor: "#fff"
    },
    "&$focused": {
      backgroundColor: "#fff",
      boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 2px`,
      borderColor: theme.palette.primary.main
    }
  },
  focused: {}
}));

function StyledTextField(props) {
  const classes = useStyles();

  return (
    <TextField InputProps={{ classes, disableUnderline: true }} {...props} />
  );
}

export default function App() {
  return (
    <>
      <div>
        <StyledTextField
          id="filled-primary"
          label="Filled primary"
          variant="filled"
          color="primary"
        />
      </div>
    </>
  );
}

The StyledTextField gets all the props and pass them in.

And we make our styles with the makeStyle function.

We styled the root with all the styles we want.

The root would be the text field since we pass in the classes from the returned useStyles hook to the text field.

We set the border , backgroundColor , shadow and more.

transition lets us add transition effects.

Integration with 3rd Party Input Libraries

We can add things like input masks to our inputs with 3rd party libraries.

For instance, we can use the react-text-mask library to add an input mask to our Input component.

We can write:

import React from "react";
import Input from "@material-ui/core/Input";
import MaskedInput from "react-text-mask";

function TextMask(props) {
  const { inputRef, ...other } = props;

  return (
    <MaskedInput
      {...other}
      ref={ref => {
        inputRef(ref ? ref.inputElement : null);
      }}
      mask={[
        /d/,
        /d/,
        /d/,
        "-",
        /d/,
        /d/,
        /d/,
        "-",
        /d/,
        /d/,
        /d/,
        /d/
      ]}
      placeholderChar={"u2000"}
      showMask
    />
  );
}

export default function App() {
  const [values, setValues] = React.useState("");
  const handleChange = event => {
    setValues(event.target.value);
  };

  return (
    <>
      <div>
        <Input
          value={values.textmask}
          onChange={handleChange}
          name="textmask"
          id="formatted-text-mask-input"
          inputComponent={TextMask}
        />
      </div>
    </>
  );
}

We add a TextMask component that uses the MaskedInput with the mask that we want to add.

The mask will restrict the format to what we want.

showMask shows the mask

The mask has the format.

placeholderChar has a placeholder character.

We also set ref to the inputRef that’s passed in from the props.

The in our App component, we pass the TextMask into our Input ‘s inputComponent prop.

And we’ll see the input mask displayed.

Other libraries that it works with include the react-number-format library to restrict number inputs to a fixed format.

Accessibility

Input should be linked to the label and helper text so that text fields are accessible.

For example, we write:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Input from "@material-ui/core/Input";
import FormHelperText from "@material-ui/core/FormHelperText";

export default function App() {
  return (
    <>
      <div>
        <FormControl>
          <InputLabel htmlFor="name-input">name</InputLabel>
          <Input id="name-input" aria-describedby="name-helper-text" />
          <FormHelperText id="name-helper-text">
            enter your name.
          </FormHelperText>
        </FormControl>
      </div>
    </>
  );
}

to make it accessible.

We have the html-for prop which matches the id of the input.

id of the FormHelperText matches the aria-describedby of the Input .

This way, they can be linked to each other.

Conclusion

Material UI text fields can be customized with 3rd party libraries.

Also, we can make them accessible with additional props in the components.