Skip to content
On this page

TabContainer

Alpha
On this page
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.

Arguments

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

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 %>