Segment Control - Skeleton

<script lang="ts">
	import { Segment } from '@skeletonlabs/skeleton-svelte';
	// Icons
	import IconLeft from 'lucide-svelte/icons/align-left';
	import IconCenter from 'lucide-svelte/icons/align-center';
	import IconRight from 'lucide-svelte/icons/align-right';
	import IconJustify from 'lucide-svelte/icons/align-justify';

	let align = $state('left');
</script>

<Segment bind:value={align} name="align">
	<Segment.Item id="left" value="left">
		<IconLeft />
	</Segment.Item>
	<Segment.Item id="center" value="center">
		<IconCenter />
	</Segment.Item>
	<Segment.Item id="right" value="right">
		<IconRight />
	</Segment.Item>
	<Segment.Item id="justify" value="justify">
		<IconJustify />
	</Segment.Item>
</Segment>

This component wraps native radio inputs, which enables it to operate as as a form control.

Disabled

Set disabled to any item to disable focus and interaction.

<script lang="ts">
	import { Segment } from '@skeletonlabs/skeleton-svelte';

	let size = $state('sm');
</script>

<Segment bind:value={size} name="size">
	<Segment.Item id="sm" value="sm">sm</Segment.Item>
	<Segment.Item id="md" value="md">md</Segment.Item>
	<Segment.Item id="lg" value="lg" disabled>lg</Segment.Item>
</Segment>

Vertical

Set flexDirection to enable a vertical layout. This can be controlled with responsive breakpoints.

<script lang="ts">
	import { Segment } from '@skeletonlabs/skeleton-svelte';

	let size = $state('sm');
</script>

<Segment bind:value={size} name="size" flexDirection="flex-col">
	<Segment.Item id="sm" value="sm">Small</Segment.Item>
	<Segment.Item id="md" value="md">Medium</Segment.Item>
	<Segment.Item id="lg" value="lg" disabled>Large</Segment.Item>
</Segment>

Alternative

Consider using a Button Group if you need direct control over the markup and styling.