Skip to content
Skip design navigation
Etesie Alpha
Loading account
Components · Segmented control · Use

Segmented control

The segment labels and selected destination are application navigation state; this extension has one construction.

State

Markup

<script lang="ts">
	import { SegmentGroup } from '@ark-ui/svelte';
</script>

<SegmentGroup.Root defaultValue="light" class="segment-group-root" aria-label="Scheme">
	<SegmentGroup.Indicator class="segment-group-indicator" />
	{#each [{ value: 'light', label: 'Light' }, { value: 'dark', label: 'Dark' }] as option (option.value)}
		<SegmentGroup.Item value={option.value} class="segment-group-item">
			<SegmentGroup.ItemText>{option.label}</SegmentGroup.ItemText>
			<SegmentGroup.ItemControl />
			<SegmentGroup.ItemHiddenInput />
		</SegmentGroup.Item>
	{/each}
</SegmentGroup.Root>