Is there a good UI pattern for this sort of specific select case?

There is a search field for labels/tags. The user has 3 options they can select from to refine their search. These options are grouped into two sets.

Set 1: 2 options ['Case sensitivity' & 'Starts with'], the user can select one or both of these options.

Set 2: 1 option [Switch to 'Regex' syntax].

The user can use either or both options from Set 1 but not Set 2 or they can use Set 2 but not any of the options from set 1.

Essentialy it boils down to you can use THESE [Set 1] OR you can use THIS [Set 2]. Set 1 acts like a set of checkboxes whereas Set 2 is more like a radio button.

Without using checkboxes and a radio button how else could i best provide this functionality in a UI that still looks and feels intuitive.

Here is the current design: The icons don't really feel standard aside from the case senstivity so i'm not sure how much value they add:

Current design in product

Here is my proposed solution: Using switches and lables to make things clearer but would still require a level of experiential learning and interacting with the components to figure out how it works.

Proposed solution

FYI: Ideally I would usability test this new design but I haven't been afford the time to do this which is less than ideal!

New contributor
DannyW86 is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.


Your Answer

DannyW86 is a new contributor. Be nice, and check out our Code of Conduct.

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

Browse other questions tagged or ask your own question.