React Switch component - Material UI (original) (raw)

Skip to content

• Getting started
• Components
  • All components
  • Inputs
    * Autocomplete
    * Button
    * Button Group
    * Checkbox
    * Floating Action Button
    * Radio Group
    * Rating
    * Select
    * Slider
    * Switch
    * Text Field
    * Transfer List
    * Toggle Button
  • Data display
    * Avatar
    * Badge
    * Chip
    * Divider
    * Icons
    * Material Icons
    * List
    * Table
    * Tooltip
    * Typography
  • Feedback
    * Alert
    * Backdrop
    * Dialog
    * Progress
    * Skeleton
    * Snackbar
  • Surfaces
    * Accordion
    * App Bar
    * Card
    * Paper
  • Navigation
    * Bottom Navigation
    * Breadcrumbs
    * Drawer
    * Link
    * Menu
    * Pagination
    * Speed Dial
    * Stepper
    * Tabs
  • Layout
    * Box
    * Container
    * Grid
    * Grid v2New
    * Stack
    * Image List
    * Hidden
  • Utils
    * Click-Away Listener
    * CSS Baseline
    * Modal
    * No SSR
    * Popover
    * Popper
    * Portal
    * Textarea Autosize
    * Transitions
    * useMediaQuery
  • MUI X
    * Data Grid
    * Date & Time Pickers
    * Charts
    * Tree View
  • Lab
    * About the lab 🧪
    * Masonry
    * Timeline
• Component API
• Customization
• How-to guides
• Integrations
• Experimental APIs
• Migration
• Discover more
• Design resources
• Template store

+

Switches toggle the state of a single setting on or off.

Switches are the preferred way to adjust settings on mobile. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.

• Feedback
• Bundle size
• Material Design
• Figma
• Adobe
• Sketch

Basic switches

Press Enter to start editing

Label

You can provide a label to the Switch thanks to the FormControlLabel component.

Press Enter to start editing

Size

Use the size prop to change the size of the switch.

Press Enter to start editing

Color

Press Enter to start editing

Controlled

You can control the switch with the checked and onChange props:

Press Enter to start editing

Switches with FormGroup

FormGroup is a helpful wrapper used to group selection controls components that provides an easier API. However, you are encouraged to use Checkboxes instead if multiple related controls are required. (See: When to use).

Customization

Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.

MUI switchAndroid 12iOS style

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.

Label placement

You can change the placement of the label:

When to use

• Checkboxes vs. Switches

Accessibility

• It will render an element with the checkbox role not switch role since this role isn't widely supported yet. Please test first if assistive technology of your target audience supports this role properly. Then you can change the role with<Switch inputProps={{ role: 'switch' }}>
• All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the <label> element (FormControlLabel).
• When a label can't be used, it's necessary to add an attribute directly to the input component. In this case, you can apply the additional attribute (for example aria-label, aria-labelledby, title) via the inputProps prop.

<Switch value="checkedA" inputProps={{ 'aria-label': 'Switch A' }} />

Unstyled

Use the Base UI Switch for complete ownership of the component's design, with no Material UI or Joy UI styles to override. This unstyled version of the component is the ideal choice for heavy customization with a smaller bundle size.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

MUI stands in solidarity with Ukraine.

Contents