Tabs

.tabs, .tabs-list, .tabs-trigger, .tabs-content. Selected state is aria-selected="true". There is no wrapper. A few lines of $state (or radios) pick the panel. Keyboard: Left / Right on the list.

Preview

Code

<script>
	let tab = $state('account');
</script>

<div class="tabs">
	<div class="tabs-list" role="tablist" aria-label="Settings">
		<button class="tabs-trigger" type="button" role="tab" aria-selected={tab === 'account'} onclick={() => tab = 'account'}>Account</button>
		<button class="tabs-trigger" type="button" role="tab" aria-selected={tab === 'password'} onclick={() => tab = 'password'}>Password</button>
	</div>
	{#if tab === 'account'}
		<div class="tabs-content" role="tabpanel">Make changes to your account here.</div>
	{:else}
		<div class="tabs-content" role="tabpanel">Change your password here.</div>
	{/if}
</div>