Skip to content
Aihio v2.3.0
Search
GitHub
Search Describe what you are building, or name a component, intent, or token. Components and patterns are ranked the way the MCP server's find tool ranks them for an agent.

<aihio-tabs> v1.1.0 Markdown for agents

Tabs

Switches between sibling panels of content with a row of tabs, such as the sections of a settings page. Arrow keys move between tabs.

Intents tabs navigation layout

Examples

Each one rendered live, over the markup that produces it.

Two panels

Tab 1 Tab 2 Content 1 Content 2 
<aihio-tabs value="one">
  <aihio-tab-list>
    <aihio-tab value="one">Tab 1</aihio-tab>
    <aihio-tab value="two">Tab 2</aihio-tab>
  </aihio-tab-list>
  <aihio-tab-panel value="one">Content 1</aihio-tab-panel>
  <aihio-tab-panel value="two">Content 2</aihio-tab-panel>
</aihio-tabs>

Mistakes

Each one beside its fix, with what aihio lint says about it. The prompt fragment gives agents the same pairs, and the build fails if the linter stops catching one or a fix stops passing.

aihio-tab must sit inside an aihio-tab-list; keyboard navigation is bound to the list.

Don't

<aihio-tabs>
  <aihio-tab value="a">A</aihio-tab>
  <aihio-tab-panel value="a">Content</aihio-tab-panel>
</aihio-tabs>

aihio lint reports

  • missing-required-child error missing required child <aihio-tab-list>.
  • invalid-child error child <aihio-tab> is not allowed here. Expected: aihio-tab-list, aihio-tab-panel.

Do

A Content 
<aihio-tabs value="a">
  <aihio-tab-list>
    <aihio-tab value="a">A</aihio-tab>
  </aihio-tab-list>
  <aihio-tab-panel value="a">Content</aihio-tab-panel>
</aihio-tabs>

Panel value does not match any tab value; the panel will never activate.

Don't

<aihio-tabs value="a">
  <aihio-tab-list>
    <aihio-tab value="a">A</aihio-tab>
  </aihio-tab-list>
  <aihio-tab-panel value="b">Content</aihio-tab-panel>
</aihio-tabs>

aihio lint reports

  • tabs-value-pairs error Match each tab's value to exactly one panel's value. Mismatched values leave panels orphaned.

Do

A Content 
<aihio-tabs value="a">
  <aihio-tab-list>
    <aihio-tab value="a">A</aihio-tab>
  </aihio-tab-list>
  <aihio-tab-panel value="a">Content</aihio-tab-panel>
</aihio-tabs>

API

Every attribute, property, method, and event the schema declares for aihio-tabs.

Attributes

value
string
The currently active tab value

Composition

Required children
aihio-tab-list aihio-tab-panel
Allowed children
aihio-tab-list aihio-tab-panel

Sub-components

Used only inside aihio-tabs, which gives them their roles and keyboard behaviour.

<aihio-tab-list>

Container for tab triggers

<aihio-tab>

Individual tab trigger

Attributes

value
string
Stable value that matches a corresponding aihio-tab-panel.
disabled
boolean default false
Disables the tab and removes it from keyboard navigation.

Events

aihio-tab-select
detail { value: string }
Fired when the tab is activated; aihio-tabs listens for this to drive selection

<aihio-tab-panel>

Content panel for a tab

Attributes

value
string
Stable value that matches a corresponding aihio-tab.

Accessibility

What you have to provide, and what the component already does. The obligations with a rule are checked by aihio lint and by the dev build's console warnings.

Your obligations

  • error When every aihio-tab and aihio-tab-panel

    Match each tab's value to exactly one panel's value. Mismatched values leave panels orphaned.

    Checked as tabs-value-pairs

Handled for you

  • role="tablist" on aihio-tab-list
  • role="tab" on aihio-tab with aria-selected and tabindex roving
  • role="tabpanel" on aihio-tab-panel with aria-labelledby wired to its tab
  • Arrow keys, Home, End move between tabs
  • Panels are hidden when inactive

In patterns

Canonical compositions that use aihio-tabs.