kt-tabs
An underlined tab bar.
Preview
An underlined tab bar.
Against <kt-segmented-control>
They look similar in a screenshot and mean different things.
A segmented control picks a value — a date range, a unit, a sort order — and belongs inside a form or a toolbar. Tabs switch which region of the page you are looking at; they read as part of the page structure rather than as a control sitting on it.
The shapes say so: an inset track with a raised pill, versus a rule with one segment underlined. Using the wrong one is not a styling mistake, it is telling the reader the wrong thing about what will happen.
Panels
<kt-tabs> manages selection only — swapping the panel is yours, the same
contract as the segmented control. Give each tab a panel id and the tab
carries aria-controls, so the pairing is announced:
Loading
loading renders three placeholder tabs instead of the real ones, so a bar
waiting on a fetch reserves its height rather than appearing under the content
already on screen.
Keyboard
One tab stop for the whole bar, as a tablist should have.
| Key | Does |
|---|---|
← / → | Previous / next tab, and selects it |
Home / End | First / last selectable tab |
Disabled tabs are skipped, and selection wraps at both ends.
API
| Property | Attribute | Type | Default |
|---|---|---|---|
tabs | — | KtTab[] | [] |
value | value | string | number | null | null |
disabled | disabled | boolean | false |
loading | loading | boolean | false |
label | label | string | '' |
| Event | Detail |
|---|---|
kt-change | { value, tab } — not fired when the active tab is clicked again |
| Part | Description |
|---|---|
base | The tablist |
tab | One tab |