Tabs
Switch between named content panels.
Usage Notes
- Use for settings panel sections, content category switching, and configuration groups.
- Not suitable for multi-page wizards — use explicit page state and navigation.
- Related components:
buttonfor submit actions,linkfor cross-page navigation. - Use
$valueandonchangefor controlled switching.
Orientation variants
namespace: "doc_tabs_orientation_diff",
layout: {
"row:orientations": {
"column:h": {
"text:horiz": {
text: "horizontal (default)"
},
"tabs:horizontal": {
value: "a",
orientation: "horizontal",
tabs: [
{
value: "a",
label: "Tab A"
},
{
value: "b",
label: "Tab B"
}
]
}
},
"column:v": {
"text:vert": {
text: "vertical"
},
"tabs:vertical": {
value: "a",
orientation: "vertical",
tabs: [
{
value: "a",
label: "Tab A"
},
{
value: "b",
label: "Tab B"
}
]
}
}
}
}
}