Segmented buttons

Single choice

Week

Month

Year

<SegmentedButton
	name="demo"
	options={[
		{
			label: 'Week',
			selected: true,
		},
		{
			label: 'Month',
		},
		{
			label: 'Year',
		},
	]}
/>

Multiple choice

<SegmentedButton
	name="demo2"
	multiSelect
	options={[
		{
			label: 'XS',
		},
		{
			label: 'S',
		},
		{
			label: 'M',
		},
		{
			label: 'L',
		},
		{
			label: 'XL',
		},
	]}
/>

Icons

{#snippet darkIcon()}
	<DarkModeIcon />
{/snippet}

{#snippet lightIcon()}
	<LightModeIcon />
{/snippet}

{#snippet systemIcon()}
	<BrightnessMediumIcon />
{/snippet}
<SegmentedButton
	name="demo3"
	options={[
		{
			label: 'Dark',
			icon: darkIcon,
		},
		{
			label: 'System',
			icon: systemIcon,
			selected: true,
		},
		{
			label: 'Light',
			icon: lightIcon,
		},
	]}
/>
<SegmentedButton
	name="demo4"
	options={[
		{
			label: darkIcon,
		},
		{
			label: systemIcon,
			selected: true,
		},
		{
			label: lightIcon,
		},
	]}
/>

Disabled

Apple

Banana

Orange

<SegmentedButton
	name="demo4"
	options={[
		{
			label: 'Apple',
			disabled: true,
		},
		{
			label: 'Banana',
			selected: true,
		},
		{
			label: 'Orange',
		},
	]}
/>

API

Attributes

Attribute	Type	Default	Description
`name`	`string`		The name of the input group
`options`	`{ label: string \| Snippet, icon?: Snippet, selected?: boolean, disabled?: boolean, onclick?: (event: Event) => void }[]`		The options to display
`multiSelect`	`boolean`	`false`	Whether to allow multiple options to be selected

Bindables

Attribute	Type	Description
`element`	`HTMLElement`	A reference to the root DOM element of the component. This variable is bound using `bind:this`, allowing direct access to the underlying HTML element for manipulation or querying within the component's logic.