Skip to content

TabContainer

Table of contents
Table of contents
This component requires JavaScript to function. Please refer to the Installation section to set it up.

Use TabContainer to create tabbed content with keyboard support. This component does not add any styles. It only provides the tab functionality. If you want styled Tabs you can look at TabNav.

This component requires javascript.

Examples

Default

Panel 1
<%= render(Primer::TabContainerComponent.new) do %>
<div role="tablist">
<button type="button" role="tab" aria-selected="true">Tab one</button>
<button type="button" role="tab" tabindex="-1">Tab two</button>
<button type="button" role="tab" tabindex="-1">Tab three</button>
</div>
<div role="tabpanel">
Panel 1
</div>
<div role="tabpanel" hidden>
Panel 2
</div>
<div role="tabpanel" hidden>
Panel 3
</div>
<% end %>

Arguments

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments