In the screenshot below, there is a section for vendor types. On checking (enabling) each vendor type, the application requires the user to add more details to configure it (notice the cards at the bottom).

Each card is representing the additional details required for the respective vendor types. The current layout isn't intuitive and seems bad in terms of the UX.

What would be a good/acceptable way of showing additional details when a checkbox is enabled?

enter image description here


You can also use tab for the same, once you will in first tab you can have a save button, save the first tab then move to the second tab and so on.

This will pretty helpful for better UX.

Also use single line bootstrap group selection for less than 5 item for selectbox, radio button etc.

enter image description here


My suggestion would be this, it's neater and only shows containers for active/selected items.

enter image description here

  • Hey Darry thanks for your answer. But do you think that if we have more than 10 controls need to show, Then is this approach work ?, Because if i check first checkbox it will slide down the another three checkbox option and it will difficult to check other option. and also when we select all options it will left blank space and a long scroll. – Ajit Kumar Aug 9 '19 at 12:12
  • Make the accordion collapsible as well as checkable would be my suggestion. – DarrylGodden Aug 9 '19 at 13:31

This solution in UX case is good. it is worth refining the solution in terms of aesthetics/interface

Things to improve that I notice:

  • -If you have less than 5 options in multiselect, it's good to 'pull them outside' this limits the interaction by 1
  • vendor status is neccessary here?

enter image description here

  • In the default settings ALL (OTP, Non OTP etc.) should be hide and after click opens according to @DarrylGodden answer

Does OTP exclude Non OTP? - if so it should be logically taken into account

When the checkbox is selected the appropriate option should display below.

  • Depending on the level of user knowledge of express knowledge I would introduce tooltips or not (research can helps in this case)

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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