How to position Switch label to the left of the switch?

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

The examples here demonstrate how to add a label to various forms of input, including the Switch component.

Unfortunately, every single example on that page that includes a label has it positioned to the right of the component. I’ve looked through the props of FormControlLabel, and there doesn’t seem to be any option that allows me to change this. In fact, looking at the code of FormControlLabel, it seems to be hard-coded his way.

I was able to work around this by setting the Label’s direction to rtl (and setting the Switch’s direction back to ltr):

import React from "react";
import styled from "react-emotion";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";

const StyledLabel = styled(FormControlLabel)`
  direction: ${({ rtl }) => rtl && "rtl"};
  margin: 0;
`;

const StyledSwitch = styled(Switch)`
  direction: ltr;
`;

export default ({ label, rtl, ...props }) => (
  <StyledLabel rtl={rtl} control={<StyledSwitch {...props} />} label={label} />
);

But this feels very hacky and potentially unstable to me.

Is there any way I can have a Switch with its label on the left without resorting to rtl hacks? If so, can it please be documented? If not, please consider this a feature request.

[iamkennytso]

What if we want to put labels on both sides?

[mbrookes]

I haven’t tried it with FormControlLabel, but Slider can potentially take two labels, so it might be interesting to try to accomadate that: