I have a group of toggles (styled checkboxes) in my interface to activate/deactivate the visibility of input fields in a form in he front-end. Two of those inputs are required for the form to work so they are always on. I would still like to display the toggles to show these fields as "on".
How do I clearly indicate these fields as "on" but disabled for the user. I've tried: grey (looks if they're off) and darker green (doesn't really communicate the functionality).
Consider removing UI elements that have no function, and add labels to emphasize the options the user does have.
For a simple form, there's a lot going on in this interface. Not only are you letting the user tell the system what fields are visible and/or required, but you're also trying to communicate to the user the situations where they aren't allowed to make that choice. Plus, it looks like there might be circumstances where the user could make an invisible field required, and you probably don't want that to happen.
I would suggest moving the visibility toggles into their own labeled column for clarity, and removing the toggles from the two rows where they don't make sense. Having them there, no matter the visual style, will only confuse users who assume there must be some (hidden) way to interact with them. Disabling a control should only be done when the user has some way to enable it nearby.
That also allows you to use the disabled style for when the user checks the optional Required box for a field. You can lock it to "on" when it is required not only to convey why the toggle is no longer available, but to also sidestep the issue of required invisible fields.
Since the enabled-disabled and required-optional fields are interdependent, why not combine them to make the concept of enabled implicit?
Field | Disabled Optional Required
--------------+------------------------------
Name | X
Email Address | X
Phone Number | [ ] [X] [ ]
Date of birth | [ ] [ ] [X]
Place of res. | [X] [ ] [ ]
Street Addr. | [X] [ ] [ ]
(Apologies for the terrible ascii art - no graphics package on this system)
Alternative if the fields are intended to be reorderable by the user:
Remove the disabled fields entirely, and just have a (possibly disabled) toggle for required. Allow the user to add "new" (currently disabled) fields by dragging them from a selection bin into the list. Again, the concept of enabled becomes implicit.
I've tried: grey (looks if they're off) and darker green (doesn't really communicate the functionality).
You're absolutely right that making the toggle switches grey would look like they were 'off', and dark green would only confuse its function; "Why is this dark green, and the others are not?"
I would suggest a very common practice, which is to 'disable' the toggle switch:
The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants. If the disabled attribute is specified on a form control, the element and its form control descendants do not participate in constraint validation.
If you want to keep the green (to indicate that the field will be present), but don't want to allow the state to be toggled, then one possibility is to keep the green, but lose the toggle:
Question - how would a colour blind person tell the difference between the toggle being on or off? Many colour blind people like myself cannot "see" green, both options appear grey for me.
To be fully accessible you shouldn't rely on colour alone. You can get around this by displaying the appropriate toggle value as a label, e.g.
[on] [theToggle/checkbox] [off]
or if the option cannot be changed apply relevent text next to the input, such as
[theDisabledToggle] This setting is always on because...
Once you have adequate labelling in place you can colour the toggles however you want.
The switch position is useless unless you know which side is "on" or "off", that's why having appropriate labels is necessary.
Tooltips are tricky, not a good choice, you'd have to indicate the toggle has tooltips, then how do you tap the toggle to get the tooltip on a phone or tablet without triggering the toggle?
Ever since toggles were introduced they have caused issues without proper labeling, especially for people who suffer from colour blindness (including me!). The most all round accessible solution for toggles is to use labels.
Of course using plain checkbox or radio input pairs with labels is virtually foolproof, but "designers know best" don't they!
I think the thing you're trying to convey is that some sets of controls are 'locked' so the user can't change them. In this case, I can understand wanting to show the toggles, even though they can't be changed, as they have the same 'visible' status as the other fields. A 'lock' icon might work here:
Alternatively, you could show that the whole row (visibility and required) are locked by omitting the controls and just showing the lock:
In addition to the other suggestions, you can grey out the text of locked options. So, for instance, the text "Date of Birth" would be greyed out.
I think you're going about all of this wrong.
Considering the type of data that you require, you should have a form with input fields, where mandatory fields are marked with an asterisk, and optional ones are not (alternatively, some recommend that optional ones have written "optional" in the parentheses, while mandatory don't have anything). Additionally, when pressing the submit button, a tooltip should appear for those required fields that aren't filled in with a message "This field is required".
Using switches in your case doesn't make sense to me.
Something like this:
