Tabs

The tabs component is used to display a group of related content in a tabbed interface. The user can switch between tabs to view different content. The tabs component consists of a collection of tabs, where each tab represents a different piece of content. The tab label should clearly represent the content it opens.

Example

one

two

three

panel one

panel two

panel three

code

<bp-tabs>
  <bp-tab-list aria-label="example tablist">
    <bp-tab selected>one</bp-tab>
    <bp-tab>two</bp-tab>
    <bp-tab>three</bp-tab>
  </bp-tab-list>
  <bp-tab-panel>panel one</bp-tab-panel>
  <bp-tab-panel>panel two</bp-tab-panel>
  <bp-tab-panel>panel three</bp-tab-panel>
</bp-tabs>

<script type="module">
  import '@blueprintui/components/include/tabs.js';

  const tabgroup = document.querySelector('bp-tabs');
  const tabs = tabgroup.querySelectorAll('bp-tab');

  tabgroup.addEventListener('click', (e) => {
    if (e.target.tagName === 'BP-TAB') {
      tabs.forEach((t) => (t.selected = false));
      e.target.selected = true;
    }
  });
</script>

Vertical

item one

item two

item three

panel one

panel two

panel three

code

<bp-tabs layout="vertical">
  <bp-tab-list aria-label="example vertical tablist">
    <bp-tab selected>item one</bp-tab>
    <bp-tab>item two</bp-tab>
    <bp-tab>item three</bp-tab>
  </bp-tab-list>
  <bp-tab-panel>panel one</bp-tab-panel>
  <bp-tab-panel>panel two</bp-tab-panel>
  <bp-tab-panel>panel three</bp-tab-panel>
</bp-tabs>

<script type="module" interactive>
  import '@blueprintui/components/include/tabs.js';

  const tabgroup = document.querySelector('bp-tabs');
  const tabs = tabgroup.querySelectorAll('bp-tab');

  tabgroup.addEventListener('click', (e) => {
    if (e.target.tagName === 'BP-TAB') {
      tabs.forEach((t) => (t.selected = false));
      e.target.selected = true;
    }
  });
</script>

Install

NPM

// npm package
import '@blueprintui/components/include/tabs.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/tabs.js/+esm';
</script>

Accessibility

The tabs component should have a clear visual distinction between the selected and unselected tabs.
The tabs component should be keyboard accessible, allowing users to navigate and activate tabs using the keyboard.
The tab label should clearly represent the content it opens.

bp-tabs

Properties

Name	Types	Description
`layout`	`'horizontal' \| 'vertical'`

Attributes

Name	Types	Description
`layout`	`'horizontal' \| 'vertical'`

CSS Properties

Name	Types	Description
`--background`
`--color`
`--border-radius`
`--padding`

Slots

Name	Types	Description
`default`

bp-tab

Properties

Name	Types	Description
`selected`	`boolean`	selected visual state
`tabPanel`	`BpTabPanel`
`pressed`	`boolean`	turns the button into a toggle button
`expanded`	`boolean`	indicate if a control is expanded or collapsed
`readonly`	`boolean`	makes the element not mutable, meaning the user can not interact with button
`disabled`	`boolean`	determines if element is mutable or focusable
`type`	`'button' \| 'submit'`	default behavior of the button
`name`	`string`	represents the name of the current element as a string.
`value`	`string`	determines the current value
`popoverTargetElement`	`HTMLElement`
`popoverTargetAction`	`\| 'toggle' \| 'show' \| 'hide'`
`popovertarget`	`string`
`form`	`HTMLFormElement`
`formAction`	`string`
`formEnctype`	`string`
`formMethod`	`string`
`formNoValidate`	`boolean`
`formTarget`	`string`
`labels`	`NodeListOf`
`validationMessage`	`string`
`validity`	`ValidityState`
`willValidate`	`boolean`
`checkValidity`	`any`
`reportValidity`	`any`
`setCustomValidity`	`any`
`formAssociated`	`boolean`

Attributes

Name	Types	Description
`selected`	`boolean`	selected visual state
`pressed`	`boolean`	turns the button into a toggle button
`expanded`	`boolean`	indicate if a control is expanded or collapsed
`readonly`	`boolean`	makes the element not mutable, meaning the user can not interact with button
`disabled`	`boolean`	determines if element is mutable or focusable
`type`	`'button' \| 'submit'`	default behavior of the button
`value`	`string`	determines the current value
`popoverTargetElement`	`HTMLElement`
`popovertargetaction`	`\| 'toggle' \| 'show' \| 'hide'`
`popovertarget`	`string`

CSS Properties

Name	Types	Description
`--background`

Slots

Name	Types	Description
`default`

bp-tab-panel

Properties

Name	Types	Description

CSS Properties

Name	Types	Description
`--padding`

Slots

Name	Types	Description
`default`