Skip to content
Edit this page

Switch

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.

Basic switches

Switch with FormControlLabel

Switch can be provided with a description thanks to the FormControlLabel component.

Switches with FormGroup

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

Assign responsibility

Be careful

Customized switches

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

Sizes

Fancy smaller switches? Use the size property.

<FormGroup>
  <FormControlLabel
    control={<Switch size="small" checked={checked} onChange={toggleChecked} />}
    label="Small"
  />
  <FormControlLabel
    control={<Switch checked={checked} onChange={toggleChecked} />}
    label="Normal"
  />
</FormGroup>

Label placement

You can change the placement of the label:

When to use

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 (e.g. aria-label, aria-labelledby, title) via the inputProps property.
<Switch value="checkedA" inputProps={{ 'aria-label': 'Switch A' }} />

API