Segmented buttons

Single choice

<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()}
	<Icon>dark_mode</Icon>
{/snippet}

{#snippet lightIcon()}
	<Icon>light_mode</Icon>
{/snippet}

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

Disabled

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

API

Attributes

AttributeTypeDefaultDescription
namestringThe name of the input group
options{ label?: string, labelIcon?: Snippet, icon?: Snippet, selected?: boolean, disabled?: boolean, onclick?: (event: Event) => void }[]The options to display
multiSelectbooleanfalseWhether to allow multiple options to be selected

Bindables

AttributeTypeDescription
groupstring | number | (string | number)[] | null | undefinedThe selected value, or an array of them with multiSelect. Bind it to read and set the selection.
elementHTMLElementA 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.