Toggle is not clear?

[m-e]

I’m using the toggle field in the Panel. It is either “yes” or “no”.

Is this Yes, or does the slider need to be moved towards Yes to get Yes? Why is the circle greyed out?

But when the toggle is moved towards Yes, it becomes No – with a tick and a black circle – which is confusing. How come one state, No, gets a tick but Yes doesn’t?

The No looks like a definite NO. But the Yes looks very unsure. Is this something that could be improved in future versions of Kirby?

[m-e]

I’ve just looked at the text file. When I thought the toggle was on Yes (the first screen grab) the content in the .txt file is:

Display: false

But when I turn the toggle to No it says:

Display: true

What’s going on?

Here’s my Blueprint:

display:
	label: Display info?
	type: toggle
	text: 
		- "Yes"
		- "No"

I assumed it would add the following to my .txt file

Display: yes

or

Display: no

I’m confused.

I’d like the default state to be Yes. Not sure if the toggle is starting on Yes or No?

[texnixe]

Your text array is the wrong way round, first must be the “off” state, second the “on” state, see documentation

[m-e]

The sub heading of the docs is “Yes/no or on/off toggle” Toggle | Kirby CMS

May be this needs to be rewritten to be the other way around, to make it clear that first state is “no” and the second “yes”?

[texnixe]

Text: Sets the text next to the toggle. The text can be a string or an array of two options. The first one is the negative text and the second one the positive. The text will automatically switch when the toggle is triggered.

[m-e]

I wonder if the toggle interface could be improved? I think this is hard to understand:

The circle is at the opposite end to the text “False” suggesting that it needs to be moved towards False to toggle False on.

Would this be clearer?

Both options are shown. Simply move the toggle to the option required.

[texnixe]

Why don’t you use radio buttons or a checkbox if you are not happy with the toggle? Toggles usually do not have two labels. Or instead of false/true, use a label that explains what the toggle does, e.g. “Show in homepage?”

[m-e]

Perhaps it’s just me, but just by looking at the toggle I can’t tell what state this is:

It looks like the toggle has to be moved to the right / towards ‘No’ to select No. I think this forces the user to interact with the toggle before it becomes clear what it is showing.

Move the toggle towards No and it is clear that the info will be displayed:

I tried radio buttons and checkboxes, but these fields allow a ‘third option’ of no button or checkbox being selected. In my particular use case toggle is the most appropriate because it has to be one or the other.

I’ll shut up now!

Thanks for all your help