I'm working on a project where the user has a list of labeled input fields and a bar above with some options. This is how it looks (simplified):

wireframe of simplified user interface

I'm now looking for an element the user can use to select the row he wants to modify. Everything I came up with isn't yet working:

  1. A checkbox isn't working because the user shouldn't be able to select more then one item at the same time.
  2. Radiobuttons aren't working either because the user wouldn't be able to deselect the element.

Does anyone knows some best practices or have new ideas?

  • So the options at the top are applied to, or edit, the 3 labels below? – Fractional Nov 15 '13 at 14:32
  • Yes, kind of. It's a configurator for print products. The inputs are shown as a preview image next to the form. So, the options are applied to the rendered product. – Marcel Otten Nov 15 '13 at 14:36
  • Is there any reason you couldn't have those options repeated against each label? Possibly, only the 'active' one would expand to show these options and the other inactive ones would shrink to hide them? I'm sorry, I still don't quite get what actions are supposed to be taking place. – Fractional Nov 15 '13 at 15:07
  • There will be a lot more options soon (delete row, new row, change position etc.) and the lists will be longer than in the example. Therefore, having the options close to the rows is not an option, even if they are just visible for the active row. – Marcel Otten Nov 15 '13 at 15:19

You could try to use a grip type control on the left of the rectangle encompassing the row's controls. Sort of like the grip that GMail uses to let you drag a message to one of your labels. In GMail this only appears on hover. In your case it would of course need to be visible at all times. It would also be a good idea to make the grip appear clickable (give it a more button-y look). And you should of course highlight the selected row. The checkmark in the example is because GMail allows multiple selection, you wouldn't need to use one.

Grip in GMail Selected row in GMail

The grips used in web and mobile apps are similar to the row selector area found in grids of desktop apps. In grids that allow in-place editing of cell values, these selector area's are the only way to select the entire row instead of a single cell

enter image description here


You can use a toggle button at each row. Its states should be: On = edit mode. Off = view mode. The label should say something like "Edit" or similar and become greyed out when unselected. Changing the label's text can be confusing for some users.

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.