Web Component Usage Tabs is a web component. Add the <bolt-tabs> element containing multiple <bolt-tabs-panel> elements to create a set of tabs. Inside each <bolt-tab-panel> mark the "label" content with the attribute slot="label". Everything else is considered tab "content".
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3 
<bolt-tabs>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 1</bolt-text>
    <bolt-text>Tab panel 1</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 2</bolt-text>
    <bolt-text>Tab panel 2</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 3</bolt-text>
    <bolt-text>Tab panel 3</bolt-text>
  </bolt-tab-panel>
</bolt-tabs>
Prop Usage Configure the tabs with the properties specified in the schema.
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3 
<bolt-tabs panel-spacing="small" align="center">
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 1</bolt-text>
    <bolt-text>Tab panel 1</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 2</bolt-text>
    <bolt-text>Tab panel 2</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 3</bolt-text>
    <bolt-text>Tab panel 3</bolt-text>
  </bolt-tab-panel>
</bolt-tabs>
Advanced Usage Two advanced options are shown below. Automatically show a <bolt-tab-panel> by setting selected-tab on <bolt-tabs> or by adding selected to a single <bolt-tab-panel>.
Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3 Tab label 1 Tab panel 1 Tab label 2 Tab panel 2 Tab label 3 Tab panel 3 
<!-- Use `selected-tab` to set selected tab -->
<bolt-tabs selected-tab="2">
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 1</bolt-text>
    <bolt-text>Tab panel 1</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 2</bolt-text>
    <bolt-text>Tab panel 2</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 3</bolt-text>
    <bolt-text>Tab panel 3</bolt-text>
  </bolt-tab-panel>
</bolt-tabs>

<!-- Use `selected` to set selected tab -->
<bolt-tabs>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 1</bolt-text>
    <bolt-text>Tab panel 1</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel selected>
    <bolt-text slot="label">Tab label 2</bolt-text>
    <bolt-text>Tab panel 2</bolt-text>
  </bolt-tab-panel>
  <bolt-tab-panel>
    <bolt-text slot="label">Tab label 3</bolt-text>
    <bolt-text>Tab panel 3</bolt-text>
  </bolt-tab-panel>
</bolt-tabs>