Segment Group

A group of mutually exclusive toggle buttons that function like radio buttons but with a more visual, segmented appearance.

Anatomy

<script>
  import {
    SegmentGroup,
    SegmentGroupRoot,
    SegmentGroupItem,
    SegmentGroupIndicator,
  } from "@saas-ui/svelte/components/segment-group";
</script>

<SegmentGroup.Root defaultValue="weekly">
  <SegmentGroup.Indicator />
  <SegmentGroup.Item value="daily">Daily</SegmentGroup.Item>
  <SegmentGroup.Item value="weekly">Weekly</SegmentGroup.Item>
  <SegmentGroup.Item value="monthly">Monthly</SegmentGroup.Item>
</SegmentGroup.Root>

Examples

Basic Accessibility

Basic segment group with default styling.

<SegmentGroup.Root defaultValue="React">
	<SegmentGroup.Indicator />
	{#each items as item}
		<SegmentGroup.Item value={item} label={item} />
	{/each}
</SegmentGroup.Root>

Card Accessibility

Example of segment group used within a card component.

<Card.Root class="w-80">
	<Card.Header>
		<Heading size="lg">Find your dream home</Heading>
	</Card.Header>
	<Card.Body class="gap-6">
		<Field.Root>
			<Field.Label>Bedrooms</Field.Label>
			<SegmentGroup.Root defaultValue="Any" size="sm">
				<SegmentGroup.Indicator />
				{#each ["Any", "1", "2", "3", "3+"] as item}
					<SegmentGroup.Item value={item} label={item} />
				{/each}
			</SegmentGroup.Root>
		</Field.Root>
		<Field.Root>
			<Field.Label>Beds</Field.Label>
			<SegmentGroup.Root defaultValue="1" size="sm">
				<SegmentGroup.Indicator />
				{#each ["Any", "1", "2", "2+"] as item}
					<SegmentGroup.Item value={item} label={item} />
				{/each}
			</SegmentGroup.Root>
		</Field.Root>
		<Field.Root>
			<Field.Label>Bathrooms</Field.Label>
			<SegmentGroup.Root defaultValue="3" size="sm">
				<SegmentGroup.Indicator />
				{#each ["Any", "1", "2", "3"] as item}
					<SegmentGroup.Item value={item} label={item} />
				{/each}
			</SegmentGroup.Root>
		</Field.Root>
	</Card.Body>
	<Card.Footer class="mt-3 justify-between">
		<Button variant="outline">Reset</Button>
		<Button>
			<Icon as={MagnifyingGlass} size="sm" />
			20 results
		</Button>
	</Card.Footer>
</Card.Root>

Colours Accessibility

Use the colour prop to change the colour of the segment group.

<VStack gap={4}>
	{#each colours as colour}
		<HStack gap={4} align="center">
			<Text size="xs" class="text-fg-muted w-16">{colour}</Text>
			<SegmentGroup.Root {colour} defaultValue="React">
				<SegmentGroup.Indicator />
				{#each items as item}
					<SegmentGroup.Item value={item} label={item} />
				{/each}
			</SegmentGroup.Root>
		</HStack>
	{/each}
</VStack>

Controlled Accessibility

Use the value and onValueChange props to control the selected value.

<VStack gap={4} align="start">
	<Text size="sm" class="text-fg-muted">
		Selected: {controlledValue}
	</Text>
	<SegmentGroup.Root
		bind:value={controlledValue}
		onValueChange={({ value }) => (controlledValue = value ?? "React")}
	>
		<SegmentGroup.Indicator />
		{#each items as item}
			<SegmentGroup.Item value={item} label={item} />
		{/each}
	</SegmentGroup.Root>
</VStack>

Disabled Accessibility

Use the disabled prop to disable the entire segment group.

<SegmentGroup.Root defaultValue="React" disabled>
	<SegmentGroup.Indicator />
	{#each items as item}
		<SegmentGroup.Item value={item} label={item} />
	{/each}
</SegmentGroup.Root>

Disabled Item Accessibility

Use the disabled prop on individual items to disable specific segments.

<SegmentGroup.Root defaultValue="React">
	<SegmentGroup.Indicator />
	<SegmentGroup.Item value="React" label="React" />
	<SegmentGroup.Item value="Vue" label="Vue" disabled />
	<SegmentGroup.Item value="Svelte" label="Svelte" />
</SegmentGroup.Root>

Icon Only Accessibility

Use icon-only segments with aria-label for accessibility.

<SegmentGroup.Root defaultValue="table">
	<SegmentGroup.Indicator />
	{#each views as item}
		<SegmentGroup.Item value={item.value} aria-label={item.label}>
			<Icon as={item.icon} size="sm" aria-hidden="true" />
		</SegmentGroup.Item>
	{/each}
</SegmentGroup.Root>

Sizes Accessibility

Use the size prop to change the size of the segment group.

<VStack gap={4}>
	{#each segmentGroupSizes as size}
		<VStack gap={2} align="start">
			<SegmentGroup.Root {size} defaultValue="React">
				<SegmentGroup.Indicator />
				{#each items as item}
					<SegmentGroup.Item value={item} label={item} />
				{/each}
			</SegmentGroup.Root>
			<Text size="xs" class="text-fg-muted">size = {size}</Text>
		</VStack>
	{/each}
</VStack>

With Icon Accessibility

Add icons to segment items for visual enhancement.

<SegmentGroup.Root defaultValue="table">
	<SegmentGroup.Indicator />
	{#each views as item}
		<SegmentGroup.Item value={item.value}>
			<HStack gap={2}>
				<Icon as={item.icon} size="sm" />
				{item.label}
			</HStack>
		</SegmentGroup.Item>
	{/each}
</SegmentGroup.Root>

Props

Prop	Type	Default	Description
`value`	`text`	-	The controlled value of the segment group.
`size`	`xs \| sm \| md \| lg`	`md`	The size of the component.
`colour`	`gray \| red \| orange \| yellow \| green \| teal \| blue \| cyan \| purple \| pink \| rose`	`gray`	The colour of the component.
`orientation`	`horizontal \| vertical`	`horizontal`	Layout orientation of the segment group.
`disabled`	`boolean`	`false`	Whether the component is disabled.
`onPrefetch`	`any`	-	Callback invoked when hovering over an item. Similar to Astro's link prefetching, this allows preloading data before selection.
`class`	`text`	-	CSS class to apply to the component.