Tabs

Tabbed interface for organizing content into separate views.

Demo

Make changes to your account here. Update your name, email, and profile picture.

Usage

let selected = @resource.signal(0)

@styled_tabs.tabs(
  [
    @styled_tabs.tab_item("account", "Account", [@luna.text("Account content")]),
    @styled_tabs.tab_item("password", "Password", [@luna.text("Password content")]),
  ],
  selected,
  aria_label="Settings tabs",
)

Props

Prop	Type	Default	Description
items	Array[TabItem]	-	Tab items
selected	Signal[Int]	-	Index of selected tab
aria_label	String?	None	Label for tab list
class	String?	None	Additional CSS class

BEM Classes

Class	Description
`.tabs`	Root container
`.tabs__list`	Tab button list
`.tabs__tab`	Individual tab button
`.tabs__panel`	Tab content panel

States

State	Description
`data-state="active"`	Currently selected tab
`data-state="inactive"`	Unselected tab

Keyboard

Key	Action
Arrow Left	Previous tab (wraps)
Arrow Right	Next tab (wraps)
Home	First tab
End	Last tab