Vuetify: [Feature Request] Prepend label for switch
Problem to solve
It would be possible to have the text on the left side and the switch itself on the right side
Proposed solution
My suggestion would be to add a prepend-label property so you could decide to have the switch element the default way
switch - label
or
label - switch
fr4gst4
All 5 comments
That could apply also for radio and checkbox, and probably better prop name would be "reverse" to be in line with other components
jacekkarczmarczyk
on 24 May 2019
KaelWD
on 24 May 2019
It's not aligned properly, doesn't have pointer cursor, doesn't toggle value on click and feels like misuse of slots
jacekkarczmarczyk
on 24 May 2019
anything new about it ?
Waynezhi
on 12 Sep 2019
This isn't too painful to work around in CSS with the current component, since flexbox can swap the order of the elements. I put together a basic proof-of-concept using the standard label slot with a new class applied to the v-switch and it works fine for my uses.
https://codepen.io/alanaktion/pen/OJPQKdx
It would be nice to see this included in Vuetify natively, especially since most of the switch examples in the Material documentation use this reversed layout.
Alanaktion
on 8 Jan 2020
Related issues
radicaled
路
3Comments
SteffenDE
路
3Comments
gluons
路
3Comments
KuroThing
路
3Comments
cawa-93
路
3Comments
Most helpful comment
This isn't too painful to work around in CSS with the current component, since flexbox can swap the order of the elements. I put together a basic proof-of-concept using the standard label slot with a new class applied to the
v-switchand it works fine for my uses.https://codepen.io/alanaktion/pen/OJPQKdx
It would be nice to see this included in Vuetify natively, especially since most of the switch examples in the Material documentation use this reversed layout.