question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue
  • 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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:34
  • Comments:22 (14 by maintainers)

github_iconTop GitHub Comments

6reactions
iamkennytsocommented, Aug 1, 2018

What if we want to put labels on both sides?

4reactions
mbrookescommented, Jul 5, 2018

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

image

Read more comments on GitHub >

github_iconTop Results From Across the Web

Align switch label to the left side - Bootstrap 4 - Stack Overflow
The label is now on the right side, as seen here https://i.stack.imgur.com/Z5hWp.jpg , is there an easy way to move it on the...
Read more >
How to position Switch label to the left of the switch? #11618
I was able to work around this by setting the Label's direction to rtl (and setting the Switch's direction back to ltr): ......
Read more >
Should a toggle switch's label be on its left or right?
In reading order, Labels before the switch (on the left or top for LTR languages) indicate what the switch is for. Labels after...
Read more >
How to Align Switch to Left on SwitchListTile in Flutter
In this post, we are going to show you how to align the switch to the left on SwitchLeftTile in Flutter. By default,...
Read more >
Aligning a Label and a Switch Horizontally - MSDN
How can I align a Label and a Switch horizontally, side by side, with the Label having a LEFT alignment and the Switch...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found