Switch: toggle the text and/or have text left and right

[Offbeatmammal]

With the switch component would be a nice feature to have the label change depending on if it's checked/unchecked. Would also be nice to have slots to the left and right for text to indicate two different states (eg I have a form where I've have a "competitors" or "officials" switch and position of the toggle indicates which

[AndreasRavn]

Would also be nice to have slots to the left and right for text to indicate two different states

I agree, there's multiple use cases for that, something like below pops to mind ☺️

[whjvenyl]

With the switch component would be a nice feature to have the label change depending on if it's checked/unchecked. Would also be nice to have slots to the left and right for text to indicate two different states (eg I have a form where I've have a "competitors" or "officials" switch and position of the toggle indicates which

From an accessibility and ux standpoint, the label of a switch component should never change. A switch represents a single state, that is enabled or disabled and the corresponding label should describe this state in full without the need of a label change.

[Offbeatmammal]

if we can have a left and right (or top and bottom) labels to indicate what functionality the toggle switch is indicating that would solve a lot of the issue. Visual decoration would be helpful (eg bolding the selected label) - think an On/Off switch with a confirmation light

[cherrador]

Switches should be two independent stages and one of them always is selected. The off/on, disable/enable, unchecked/checked stages are beyond the traditional concept, it should be left or right stages. If this was not the case a simple checkbox should be enough.

The concept is, no matter if a switch is left or right, it always has a stage value. The stages are arbitrary and could/should be described on the switch position for clarity. However, on the current wa-switch implementation, it looks like it's just a better looking checkbox with only one possible value. An old correct way to replace a switch was with a two radio's group, but you have to deal with 2 controllers and possible an indeterminate stage.

In the past, I tried to do as @whjvenyl suggested, put more description on the main label, but our users feedback always comes back to use stage labels on switches... and developers want 2 stage values. We end up creating our own web component for switches using FA, a sample it looks like this:

And the web-component html looks like this:

In my case the data-values and data-labels are optional and could be provided as coma separated or JSON array for more complex content (e.g. HTML or icons). If they are not provided the values are ["0","1"] and empty labels. But it's up to the developer/designer, even to flip the meaning of the switch, the left could be on and the right could be off depending on the context.

WebAwesome team, our company is willing to donate components code for you to use at your discretion and standard implementation. Or even, collaborate once the source code is available.