I have a visibility flag against document attached to a student profile. Administrator is the persona of Student profile. Administrator manages student profile and in the student profile we have a section of documents. Administrators can add student documents and they have the privilege to set it visible to student or not.


enter image description here


Now as you people have gone through the interaction, you must be able to figure out that the checkbox control of visibility becomes enabled when we select a document.

Our team is not convinced on having two check boxes in one one row. Should I be using a radio selection button or a toggle switch? Or maybe try to change the icon of visibility flag from checkbox icon to eye icon?

Variations I've implemented

enter image description here

But this was also rejected as it was too overwhelming in the row.

Kindly suggest some solution. Thanks !!!


You can use the principle of your radio button but implement it inside a dropdown if really you need to save space

  • 2
    Could you further elaborate your answer? – Levano Jan 7 at 9:12
  • A drop-down usually has a neutral state like Select Value or something. In our case, we have two values "Visible to Student" or "Not Visible to Student" along with no neutral values. So is it advisable to use a drop-down in such case? – Sheraz Jan 7 at 9:22
  • @Sheraz No, it really is not. Nearly all guidelines suggest using drop-downs only in cases where you have too many options. – Big_Chair Jan 7 at 10:33

I'm suprised you named the case of a switch but did not visualize it and went directly to a more complex one like segmented tabs.

Normally a checkbox would be optimal for a binary option, but in this case you correctly noted that there might be confusion since there are two.

I think you were already on the right path here. A switch works for binary options just as well as a checkbox (though it is usually picked for options that resemble the methaphor of ON/OFF in the real world).

It's tolerable in this case:

enter image description here

You could probably use an eye icon too, if that fits the design more:

enter image description here

Though, this one is not as perfectly clear as the switch (as users might confuse when it's on or off).

In the end it's not so much about which icon is the most correct one, but about what is the most clear and friendly solution for the user.

  • Well yes I had visualized the switch box just as you have mocked. But switch box works in order to provide an immediate effect. In our case changes will be applied when user closes the dialog by clicking the button "Add Selected Documents". Refer to this article: nngroup.com/articles/toggle-switch-guidelines – Sheraz Jan 7 at 11:02
  • 1
    @Sheraz That's true and a good point. As I put it in the last sentence, in my opinion it's much more about making the user understand than to use each element 100% precisely for its purpose.To not break any conventions though, the eye approach seems the least space consuming. Or anything similar looking. It's basically the same thing as a checkbox, just styled differently, and that's your main issue after all, two similar looking checkboxes are confusing. So have two different looking ones :) – Big_Chair Jan 10 at 9:21
  • Yeah I have went with a clickable radio button with eye off and on state with label "Visible to Students". – Sheraz Jan 10 at 11:35

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.