[Feature Request] Prepend label for switch

[fr4gst4]

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

[jacekkarczmarczyk]

That could apply also for radio and checkbox, and probably better prop name would be "reverse" to be in line with other components

[KaelWD]

https://codepen.io/anon/pen/XwEepd

[jacekkarczmarczyk]

It's not aligned properly, doesn't have pointer cursor, doesn't toggle value on click and feels like misuse of slots

https://codepen.io/anon/pen/byvoWz

[Waynezhi]

anything new about it ?

[Alanaktion]

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.

[J-Sek]

I decided to give it a try. Required a bit of CSS to align stuff properly and I am not sure if it is even clean... I mean the placement of the hint/description/subtitle is problematic. Screen readers will read it like it's just a part of label, clicks change selection state and text cannot be selected.

Guess the suggestion from years ago still stands - to use #prepend instead... The only issue is it expands when the hint is very long.

-- Edit: got it right with grid-template-columns: auto auto max-content; (example). It breaks details section (hints, errors), but hopefully nobody actually uses them under selection controls.

[benounnas]

@J-Sek i hope they make the adjustment, may be a pull request will end some pain for RTL languages, thank you for the working example !

[freddy-daniel]

I managed it with custom style

  .v-switch {
    &.--label-left {
      .v-selection-control {
        flex-direction: row-reverse;
        justify-content: space-between;
  
        label {
          padding-inline-start: 0;
          padding-inline-end: 10px;
        }
      }
    }
  }

[mikhaylov-ya]

Any progress on it?