Material-ui: How to position Switch label to the left of the switch?

[kaitlynbrown]

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] 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.

[oliviertassinari]

FormControlLabel wasn't designed with this use case in mind. You would need to write custom CSS to get this behavior.

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as I'm not sure people are looking for such abstraction. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

[caroe233]

Hi,
I hope I did the correct thing to upvote by using the thumbs up emoji.
Actually, everywhere in the Material design guidelines the switches are on the right of the label, so it would be very helpful to have an easy way to do this...

[davidcoleman007]

I too would like this. imagine that you have a pane to view some page of results, and you want a select all switch at the top right. You want the label on the left to nestle nicely into the top right corner. this is totally in line with mobile first design and hey, bonus! it works on a desktop layout too!

I've +1'ed the ticket! Material-UI is a component lib, and regardless if we "think" we would do something, the option to show a form label on one side or the other is ultimately a design decision which a flexible and powerful framework should be able to offer. wink :)

[oliviertassinari]

Alright, we can add a property to change the order of the control and the label:
https://github.com/mui-org/material-ui/blob/b3564a767135b933146f7fe73e3a34b14950c782/packages/material-ui/src/FormControlLabel/FormControlLabel.js#L75-L90
It should be easy to implement. In the mean time, you don't have to use the FormControlLabel component. You should be able to inverse the order in your code quite easily.

[mbrookes]

@oliviertassinari Any thoughts on prop name?

[oliviertassinari]

@mbrookes Not really, maybe we could follow the Tooltip wording. It's important to have a wording that works with right to left and left to right direction.

[oliviertassinari]

What about:

controlPlacement?: 'start' : 'end';

or

labelPlacement?: 'start' : 'end';

[caroe233]

Thanks for repoening :-)

Why not make it a boolean? e.g. "controlBeforeLabel"

[mbrookes]

Hmm... good point on LTR, although while Tooltip respects the prop wording (placement="left" is always on the left, even for RTL), it would seem more practical if the positioning was reversed for RTL, but then the naming becomes confusing. (That's a whole separate issue though). start / end work as expected.

[oliviertassinari]

Why not make it a boolean? e.g. "controlBeforeLabel"

@caroe233 So we can accept more values, like top, bottom or center.

[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:

[davidcoleman007]

it is compatible with the spirit of a switch:

OFF --o ON
OFF o-- ON

[kaitlynbrown]

Which release will this be in?

[mbrookes]

@kaitlynbrown The next one. 😜

[iamkennytso]

What if we want to put labels on both sides?

[oliviertassinari]

@iamkennytso I guess the best answer is: DIY. We try to focus on the most common use cases.

[benmccann]

I've used labelPlacement="start" to put the label on the left. However, it is right-aligned. Can anyone provide a pointer for left-aligning the label?

[oliviertassinari]

@benmccann This would be better asked on StackOverflow. Stuff to try: text align right, flex justify end.

[benmccann]

Thanks for the suggestions. I got some good answers on StackOverflow.

[DjKhireddine]

Hello,
You can add class to your v-switch (ex: .reverse-switch) and in your css you add this rule:
.reverse-switch .v-input__slot {
flex-direction: row-reverse;
}

[mjhecht]

I'd also like to put the label on the left. Because it isn't that important that the text be clickable, I'll just use ordinary text for the label for now, and just use the Switch, rather than wrap it in the FormControlLabel.