Member-only story

Material UI — Radio Button Errors, Dropdowns, and Sliders

John Au-Yeung
Dev Genius
Published in
4 min readOct 9, 2020
Photo by Hermes Rivera on Unsplash

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();

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

No responses yet

Write a response