Member-only story
Material UI — Radio Button Errors, Dropdowns, and Sliders
Published in
4 min readOct 9, 2020
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();