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:
- Created 5 years ago
- Reactions:34
- Comments:22 (14 by maintainers)
Top GitHub Comments
What if we want to put labels on both sides?
I haven’t tried it with
FormControlLabel
, but Slider can potentially take two labels, so it might be interesting to try to accomadate that: