mobile – Force users to select only one of X filters in list display

Looks like a radio button would be fitting here. Radio buttons are designed so that only one option can be active at once.


download bmml source – Wireframes created with Balsamiq Mockups

If you have only a few people in the second group, you could use a combobox (like in Type of operation). If there are more people, you could still use a combobox, but with search feature – like this one:

On mobile, you could surround each radio button “section” with color or variable saturation or lightness, or gray-out other input fields when their group is not selected. The circle in radio group should be clear enough indicator to users that only one option can be active at a time.

As for the default selection – there are two paths you can take:

  1. Don’t select anything at first. This will let user choose what they want. It would be wise not to gray out anything at first, or the user might think nothing is editable.
  2. Test your app and pre-select one option the user is most likely going to use.