Control List
Overview
Use the Control List component to display grouped settings and configurations in an organized and consistent manner.
Anatomy
Basic Usage
How to use this component
Variants
The default alignment for most settings, ideal for layouts with a mix of different types of CTAs and actions.
Use for cases like beta features with many toggles to improve scannability.
Meant for destructive actions like cluster, project, or organization deletion. This variant should only be offered in right-alignment.
Control List Item Alignment
Nesting
Keep the nesting within the inner card of the component limited to one level of depth. Avoid introducing additional layers of nesting inside this card. If your use case demands a more intricate or detailed information structure, we recommended to handle it by directing the settings or content to a dedicated separate page instead.
When To Use A Nested Card Versus A Modal
In general, while modal dialogs are highly versatile, they are not ideal for every situation. They can feel intrusive and should be used sparingly. Before opting for a modal, explore alternative solutions as outlined here. Modals should be avoided whenever possible and only used cautiously when engineering constraints prevent the creation of a wizard or a new page.
Control View Item With Nested Card | Modal | |
|---|---|---|
Complexity of Settings | Use for simple settings where users only need to make 1-2 selections or provide basic input. | Use for complex settings, that involve multiple steps or interactions. For ex: multi-step processes requiring a stepper. |
Context Retention | Ideal when users need to retain full context of the UI and understand the relationship between elements. | Use modals when users need to focus on a specific task without distractions. |
Frequency of Use | Best for frequently accessed settings. | Suitable for rarely accessed settings or decisions with high impact. |
Amount of Information | Works well for cases with low to moderate information density. | Recommended for information-heavy settings. |
Anatomy of Content | Use for settings with minimal UI elements (toggles, dropdowns, single text fields). | Use modals when the content requires expansive UI components (tables, previews, data-heavy settings). |
Search Boolean
Consider enabling Search when your list becomes lengthy enough that users need to scroll to view all available options. As a best practice, if navigating or locating specific options within the component becomes challenging due to the volume or complexity of items, it’s recommended to implement or toggle on search functionality.
Action Sizing
Actions in the Control List should always be in the Small variant size (i.e. toggles, inputs, buttons, and etc.).
When To Use A Control List Versus A Expandable Card
Avoid using Control Lists to display read-only data, as they are specifically designed to accommodate input elements and interactive user actions, such as toggles or selections. Control Lists are best utilized in scenarios where users need to modify, add, or select values within the presented settings or options. For showcasing read-only information that users do not interact with, use .