Tab widget with one disabled Tab

The disabled Tab is not focusable via sequential keyboard navigation with the TAB key, arrow keys or pointer device (mouse, etc.) clicks. Consequently, the disabled Tab cannot activate a panel.


No explicit default was set, so per standard functionality this first tabpanel will be shown by default.

Here's a link just to test keyboard tabbing. (it's odd talking about tabs, and tabs.)


This is an example of a heading being used to populate the tab's label, while also not removing heading from the tabpanel. This is done by adding the value "keep" to data-atabs-heading.

There are two headings here

The tab is getting its label from the data-atabs-tab-label. The heading is kept in the tabpanel because it does not have the data-atabs-heading attribute.

It wouldn't make much sense

If the contents of a tabpanel contain additional sub headings, it wouldn't make sense to remove the initial heading from the tabpanel. Doing so would create a gap in the heading structure.

Special demo: enabled a disabled tab

There are some cases, e.g. in a multi-step process, where a user completes a task in an exposed tab panel or panels, and then by completion of that task a previously disabled tab becomes enabled.

The following button showcases how that could be implemented for the disabled "Mangos" tab.

Mangos (out of stock)

This text will never be visible, unless the tab is enabled via JS. Please refer to the demo button in the "Oranges" tab for an example how this could be achieved.