List Tablist

Tablist activation

You can use the Tablist List component to create a list of vertical tabs, and switch content in the page basing on the currently activated tab. You can disable some of the tabs: 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 tab cannot be activated.

Tablist toggle selection

In some complex use cases, you may need to combine the tab activation with a Toggle selection. You can choose whether to show the Toggles at the beginning or at the end of each List Item, and you can initialize the Toggle selection with a prefilled value. Also, the selection controls support a Disabled state: when activated, an information button is displayed in the respective List Item, and you can use it to provide useful details as to why that item is not selectable.

Tablist reordering

A Tablist List can allow users to reorder its items