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.
