w1c-tabs

Tabs

w1c-tabs coordinates slotted tab buttons and panels.

import '@w1c/components/tabs';

<w1c-tabs selected="0">
	<button slot="tabs" type="button">General</button>
	<button slot="tabs" type="button">Security</button>
	<section>
		<p>General settings.</p>
	</section>
	<section>
		<p>Security settings.</p>
	</section>
</w1c-tabs>

API

selected: zero-based selected tab index.

Slots

tabs
default panels

Events

w1c-tab-change: fires with detail.selected.

Accessibility

Use real buttons or links in the tabs slot so focus and activation stay native. Arrow, Home, and End keys are supported.