InputSwitch loss of onLabel/offLabel for Poseidon theme

Post Reply
Posts: 42
Joined: 08 Mar 2017, 23:46

14 Sep 2018, 02:06


I noticed that with the PrimeNG 6 / Poseidon 6 update, the customizable text label for "on" and "off" states for the InputSwitch component is now gone:

But... this makes the input switch very difficult to use in the Poseidon theme:

Unlike the default theme, which grays out the whole component when it is in a 'false' state and uses the primary color in a 'true' state, in Poseidon, both on and off states use a shade of the primary color, and the minimalized style makes the square "switch" portion look very similar to the rectangular "sliding area" portion.

Without mouse focus, the "off" state looks like almost nothing is there ("white box - white box") ; the "on" state looks like a white narrow rectangle next to a theme-color square. ("white box - color box")
With mouse focus, the "off" state looks like "white box - color box", the "on" state looks like "light color box - dark color box".
Notice that the "on state without mouse focus" and "off state with mouse focus" look almost identical, except for the slight difference in the relative widths of the 2 boxes, and a tiny difference in the shade of the color.

In short, I don't think the inputSwitch as it looks on Poseidon 6.1 provides enough visual clues for our users to use comfortably without confusing the "off" and "on" states.
I would love to hear your plans or suggestions to mitigate this. Thank you!

Posts: 352
Joined: 12 Sep 2017, 10:44

17 Sep 2018, 10:04

Thank you for your feedback. We will consider this feedback.
We will discuss with our design team and make an improvement for the next version. Also, after deciding, we can send you a code to use.

Posts: 42
Joined: 08 Mar 2017, 23:46

17 Sep 2018, 19:07

Thank you, I will wait for your further decisions.

User avatar
Posts: 10
Joined: 24 Aug 2017, 09:01

26 Sep 2018, 14:24

I just wanted to report the same issue. As @Sasha said, it's not clear what state is rendered on InputSwitch.

User avatar
Posts: 3275
Joined: 29 Jun 2013, 12:38

08 Oct 2018, 14:09

New InputSwitch component doesn't support on/offLabel attributes. It is by design. If you want to add labels to inputSwitch, you can use content property of CSS with :after option. Exp;

Code: Select all

/* Theme codes */
body .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-slider:before {
    background-color: #ffffff;
    border-right: 1px solid #c9cdd2;

body .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-slider {
    background-color: #00acac;
    border-right: 1px solid #00acac;

body .ui-inputswitch.ui-inputswitch-focus .ui-inputswitch-slider {
    background-color: transparent;

body .ui-inputswitch.ui-inputswitch-focus .ui-inputswitch-slider:before {
    background-color: #009393;
    border-color: #009393;

/* For Users */
body .ui-inputswitch {
    width: 4.429em !important;

body .ui-inputswitch.ui-inputswitch-checked .ui-inputswitch-slider:before {
    -webkit-transform: translateX(2.55em);
    -ms-transform: translateX(2.55em);
    transform: translateX(2.55em);

.ui-inputswitch:not(.ui-inputswitch-checked)::after {
	content: 'false';                           /* offLabel = 'false' */
	position: absolute;
	left: 29px;
	top: 5px;

.ui-inputswitch.ui-inputswitch-checked::after {
	-webkit-transition: color 0.5s;
	transition: color 0.5s;
	color: #ffffff;
	content: 'true';                            /* onLabel = 'true' */
	position: absolute;
	left: 5px;
	top: 5px;
Video; ... n.avi?dl=0

Note: you can change the above code according to your UX design.

Posts: 42
Joined: 08 Mar 2017, 23:46

09 Oct 2018, 02:45

We are aware that the new InputSwitch does not have the on/offLabels by design, since it must have been intentionally removed by PrimeNG. The problem is that the on state and off states are much more ambiguous and easier to confuse in the Poseidon premium template than in other PrimeNG templates.

I can see at least 3 different ways that the PrimeNG team can solve this issue:

1. Change the shape/color of the InputSwitch in Poseidon so that it is more clear.
2. Add back the on/off label property to PrimeNG InputSwitch component, by design.
3. Tell your customers (us) to apply a custom CSS fix, that they (us) may potentially need to tweak and test every time there is a Poseidon premium template update.

I really do appreciate the CSS fix suggestion and all the support from the PrimeNG team throughout so far.
However, I was disappointed to see @aragorn's answer, because :

A. It does not address the usability issue of the colors & shapes specific to the Poseidon theme
B. The suggested fix is not an "it just works!" advantage provided by using PrimeNG components, but requires us to peek further under-the-hood and make custom changes, which we will probably need to tweak even more when we use multiple InputSwitch components with their separate, specific on/offLabels, if we were to follow this advice
C. It does not acknowledge the fact that when we originally purchased the Poseidon theme, the Poseidon inputSwitch component had the on/off labels in its demo page, and the on/offLabels were a documented feature of the PrimeNG component itself, even though other premium themes such as Ultima did not support the labels. The design decision to remove the on/off label is a noticeable change for the Poseidon theme, but the impact was not communicated to users of the Poseidon theme.

In conclusion, thank you for considering this issue, and suggesting a workaround. We do not think that the suggested workaround is a suitable solution for our needs, and will need to find an alternate solution. I hope that you will consider this issue further to improve the next versions of PrimeNG and the Poseidon theme. Thank you.

Post Reply

Return to “Poseidon - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest