Tablist Demo

Pages

Uno

Dos

Tres

Page Notes

This page demonstrates a tablist web component called <gw-tablist>. It adds tablist functionality to any given <fieldset> of <button>s.

Each <button> must have its aria-controls property set to the id of the tabpanel it opens. No roles need to be set.

To make the css selectors more efficient, set the contianer attribute on the <gw-tablist> to the id of the element which is the nearest ancestor of both the tablist and the tabpanels.

To use the control, simply include the linked script and wrap your <fieldset> with a <gw-tablist>.

The color of the radiobutton icon can be controlled with the --icon-color css variable. The background color of the selected tab can be controlled with the --selected-color variable.