Tab Selector - Kitchen Sink

Basic tabs

Pass a stable list of tab objects and bind value to the active tab id.

Selected category: Women

import { TabSelector, type Tab } from '@mediayard/agoratopia-ui/components/tab';

const tabs: Tab[] = [
	{ id: 'women', label: 'Women' },
	{ id: 'men', label: 'Men' },
	{ id: 'kids', label: 'Kids' }
];

let category = $state('women');

<TabSelector tabs={tabs} bind:value={category} />

With icons

Each tab can include an icon component. Icons render before the label and inherit the selector sizing.

Selected section: Profile

import { BasketIcon, HeartIcon, UserIcon } from '@mediayard/agoratopia-ui/assets/vectors';
import { TabSelector, type Tab } from '@mediayard/agoratopia-ui/components/tab';

const account_tabs: Tab[] = [
	{ id: 'profile', label: 'Profile', icon: UserIcon },
	{ id: 'wishlist', label: 'Wishlist', icon: HeartIcon },
	{ id: 'basket', label: 'Basket', icon: BasketIcon }
];

let account_tab = $state('profile');

<TabSelector tabs={account_tabs} bind:value={account_tab} />

Change callback

Use onchange when selection should trigger side effects in addition to updating the bound value.

Last change: Popular

import { TabSelector, type Tab } from '@mediayard/agoratopia-ui/components/tab';

let filter = $state('popular');
let last_change = $state('Popular');

function updateFilter(tab: Tab) {
	last_change = tab.label;
}

<TabSelector tabs={filter_tabs} bind:value={filter} onchange={updateFilter} />