Components List Sheet

List Sheet

Overview API Examples Style Tokens

List sheet basic usage

The Action mode of the Sheet List component is designed for scenarios where you need to trigger actions or navigate to other parts of the application when the user activates a List Item. You can disable some of the actions: the respective List Items will still be focusable, but a tooltip can be displayed on hover and focus and leveraged to provide useful details as to why that specific action cannot be activated.

Single selection

The Single selection mode of the Sheet List component is tailored for use cases where you need your users to make one selection from a set of options. You can choose whether to show the selection checkmarks at the beginning or at the end of each List Item, and you can initialize the single selection with a prefilled value. Also, you can disable some of the options: the respective List Items will still be focusable, but a tooltip can be displayed on hover and focus and leveraged to provide useful details as to why that item is not selectable.

Multiple selection

The Multiple selection mode of the Sheet List component is tailored for use cases where you need your users to make multiple selections from a set of options. You can choose whether to show the selection checkmarks at the beginning or at the end of each List Item, and you can initialize the multiple selection with a prefilled value. Also, you can disable some of the options: the respective List Items will still be focusable, but a tooltip can be displayed on hover and focus and leveraged to provide useful details as to why that item is not selectable.