Disclosure

Tabs

A tabbed interface with full ARIA roles and keyboard support.

stableEnhancer: enhanceTabsBuilt on <button role="tab">hydrateless/tabs.css

A tabbed interface with full ARIA roles and keyboard support. The enhancer wires roving tabindex and arrow-key navigation; the markup is plain buttons and panels. Without JS, CSS shows only the first panel.

Tabs

←/→ move between tabs, Home/End jump to the ends.

Live

Hydrateless ships accessible primitives with near-zero runtime cost.

CSS-first components, optional enhancers, auto-init, and design tokens.

Free and open source under the MIT license.

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceTabs } from '@hydrateless/enhancers/tabs';

const handle = enhanceTabs(container, { activation, orientation, defaultValue, onValueChange });
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
activation	'automatic' | 'manual'	'automatic'	Whether arrow keys select on focus or require Enter/Space.
orientation	'horizontal' | 'vertical'	'horizontal'	Tab list direction.

Events and callbacks

Event / Callback	Payload	Description
hl:change	{ value: string }	Fires when the active tab changes.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-primary	Active tab indicator.
--hl-border	Tab list underline.

Accessibility

• Roles (tablist, tab, tabpanel) and aria-selected are wired by the enhancer.
• A roving tabindex keeps the tab list a single tab stop.

Related

AccordionCollapsible sections built on native <details>.Segmented ControlA compact single-select built on native radios.