Select List Dialog

At Roopairs, we recently added a new component to our design system: the Select List Dialog. It works similarly to a standard select list but appears in the center of the screen with an overlay — essentially behaving like a dialog component.

When to use it

This component is useful in two key scenarios:

1) When the select list contains complex items or structures, requiring more space and user focus.

2) When selecting objects represented by object cards in the system, such as clients, locations, or equipment.

Key States

To ensure smooth functionality across the platform, the Select List Dialog includes essential states:

• Empty State – Shown on the cover

• No Search Results – 1st gallery image

• Loading State – 2nd gallery image

• No Data Available – 3rd gallery image

Mobile Adaptation

Roopairs is a Progressive Web App (PWA), and our design system follows a key rule: every select list, menu, or popover should be represented by a drawer on mobile. The Select List Dialog is no exception.