Awesome MUI Checkbox Examples: Color, Size, Labels, More

The Material UI Checkbox component can be customized either with props or by creating nested selectors. The checkbox has lots of default classes applied based on its state (checked, error, disabled) that can be used to customize the icon color and size. In this tutorial, I will create the below checkbox. It has custom checked … Read more

The Ultimate Guide to Material-UI FormControl: 3 Examples

The MUI FormControl component is used as a high-level wrapper around subcomponents in a form. It’s primary purpose is state management. We will create a form that has three FormControl components inside, each wrapping a row of components. In many UIs that use forms, likely only one FormControl would be used and would wrap all … Read more

How to Set MUI Background Color For All Components: 3 Ways

Material-UI Background Color can be customized once and used across all components in an app. There are several ways of doing this at scale, and most involve updating the theme palette or using theme overrides. I will build the mini app below using Paper, FormLabel, and Buttons. All will draw their background color from the … Read more

The Complete MUI MenuItem Guide (Links, Disabled, Select, onClick)

The Material-UI MenuItem component has many useful props built into its API. It can easily be given a selected or disabled state, and these states provide useful default classes. The MenuItem component can also be used to add links to Menus. The MenuItem onClick prop is important for setting states and interacting with Menu links, … Read more