React Material UI is a popular library of pre-built UI components that can be used to create modern and responsive web applications. Among these components is the Switch Input, which is a form input that allows users to toggle between two states, typically “on” and “off”.
In this article, we’ll take a closer look at the React MUI Switch Input, including its features, how to use it in your code, and some tips for customizing its appearance.
Features of the React MUI Switch Input:
The Switch Input component in React MUI provides a sleek and user-friendly way to present binary options to users. It consists of a small, round toggle button that slides from one side to the other when the user clicks or taps on it. Some of the key features of the React MUI Switch Input component include:
- Label: We can name a switch with a label with the FormControlLabel component.
- Size: We can edit the size of the Switch with this prop.
- Color: We can edit the color of the switch with this prop.
- Controlled: In controlled mode, the state of the switch is managed by a parent component.
- Label placement: You can change the placement of the label, you can place it Top, End, Start, and Bottom.
- FormGroup: FormGroup can be used to group multiple Switch components together and manage their layout and validation.
- Customization: We can customize the switches with icons, manage state, etc.
Syntax:
import Switch from '@mui/material/Switch';
Approach: Create a React project and install the MUI module.
create React Project:
Step 1: Create a react app. Use the command below.
npx create-react-app project_name
Step 2: Move into the folder to perform different operations.
cd project_name
Step 3: Installing MUI modules.
npm install @mui/material @emotion/react npm install @emotion/styled @mui/icons-material
Project Structure:
Example 1: Implementation of Switch input, with variations.
Javascript
import * as React from 'react'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import Switch from '@mui/material/Switch'; export default function SwitchLabels() { return ( <> <div className="head" style={{width: "fit-content" , margin: "auto" ,}}> <h1 style={{color: "green" }}> neveropen </h1> <strong>React MUI Switch input</strong> <br /> <br /> <FormGroup> <FormControlLabel control={<Switch defaultChecked />} label="defaultChecked switch" /> <FormControlLabel control={<Switch />} label="Unchecked switch" /> <FormControlLabel control={<Switch disabled />} label="Unchecked disabled switch" /> <FormControlLabel control={<Switch defaultChecked disabled />} label="defaultChecked disabled switch" /> </FormGroup> </div> </> ); } |
Output:
Example 2: Implementation of Switch input, with colored switches, sizes, and label positions.
Javascript
import * as React from 'react'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import Switch from '@mui/material/Switch'; export default function SwitchLabels() { return ( <> <div className="head" style={{width: "fit-content" , margin: "auto" ,}}> <h1 style={{color: "green" }}> neveropen </h1> <strong>React MUI Switch input</strong> <br /> <br /> <FormGroup> <FormControlLabel labelPlacement="top" control={<Switch size="small" />} label="small switch" /> <FormControlLabel control={<Switch size="medium" />} label="medium switch" /> <FormControlLabel labelPlacement="start" control={<Switch size="medium" color="warning" />} label="orange switch" /> <FormControlLabel labelPlacement="bottom" control={<Switch defaultChecked size="medium" color="secondary" /> } label="defaultChecked switch" /> <FormControlLabel control={<Switch defaultChecked disabled size="medium" color="warning" />} label="orange disabled switch" /> </FormGroup> </div> </> ); } |
Output:
Reference: https://mui.com/material-ui/react-switch/
