<element is="tab-list">

What is it?

Tab list based on the ARIA tabs pattern.

Examples of use

• HTML

  <div is="tab-list">
    <button aria-controls="tab-11">Tab 1.1</button>
    <button aria-controls="tab-12">Tab 1.2</button>
    <button aria-controls="tab-13">Tab 1.3</button>
  </div>
  
  <div id="tab-11" hidden>
    <p>Testing horizontal tab list. First tab selected by default.
  </div>
  <div id="tab-12" hidden>Content 1.2</div>
  <div id="tab-13" hidden>Content 1.3</div>

  Output

  Tab 1.1 Tab 1.2 Tab 1.3

• HTML

  <div is="tab-list" aria-orientation="vertical">
    <button aria-controls="tab-21">Tab 2.1</button>
    <button aria-controls="tab-22" aria-selected="true">Tab 2.2</button>
    <button aria-controls="tab-23">Tab 2.3</button>
  </div>
  
  <div id="tab-21" hidden>Content 2.1</div>
  <div id="tab-22" hidden>
    <p>Testing vertical tab list. Second tab selected by default.
  </div>
  <div id="tab-23" hidden>Content 2.3</div>

  Output

  Tab 2.1 Tab 2.2 Tab 2.3