Select List Dialog

by Daniel Moss

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.