Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Requires JS

This component requires the tabs stimulus controller.

Anatomy

Tabs do |t|
  t.list do
    t.trigger
    t.trigger
  end

  t.content
  t.content
end

Name	Type	Default
`value:`	`string`	`nil`
The value of the tab that should be active by default. Must match the value of a trigger and content pair.
`dir:`	`string`	`"ltr"`
Text direction for the tabs component. Affects keyboard navigation behavior (left/right arrow keys).
`attributes`	`keyword arguments`

Name	Type
`attributes`	`keyword arguments`

Name	Type	Default
`value:`	`string`	`nil`
Unique identifier for this tab trigger. Must be provided and should match the corresponding content panel's value.
`attributes`	`keyword arguments`

Name	Type	Default
`value:`	`string`	`nil`
Unique identifier that links this content to its trigger. Must match the corresponding trigger's value.
`attributes`	`keyword arguments`

On This Page