Tabs
stable 2.9 kB<hk-tabs>The indicator reads each tab's real box, so labels of any width line up without magic numbers. Works as a router outlet driver or as plain in-page panels. Badges are bound to a count rather than baked in: zero renders nothing, anything past 99 collapses so the strip cannot widen, and opening a tab clears its own.
#tabs#segmented
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| active | string | first tab | Value of the selected tab. Two-way bindable. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Strip direction. |
| activateOnFocus | boolean | true | Whether arrow keys select as they move, or only move focus. |
| badge | number | string | null | null | Per-tab, on hk-tab. A numeric 0 renders nothing — a badge reading "0" draws the eye to say there is nothing to see. |
| badgeStyle | 'count' | 'dot' | 'count' | Whether the badge shows the number or collapses to a dot. |
| badgeMax | number | 99 | Counts above this collapse to "99+", so a busy tab cannot widen the strip. |
| clearBadgeOnSelect | boolean | true | Opening a tab is what "read" means, so its badge clears on select. |
Outputs
changedEventEmitter<string>Emits the newly active value.
Methods
select(value)(value: string) => voidProgrammatic selection.
Keyboard
- ← / → Move between tabs
- Home / End First / last tab
- Enter / Space Select when activateOnFocus is false
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-tabs-indicator | var(--hk-accent) | Indicator fill. |
| --hk-tabs-track | transparent | Strip background. |
Accessibility
- role="tablist" / "tab" / "tabpanel" with aria-controls wired both ways.
- Exactly one tab in the tab order; arrows move focus (roving tabindex).