Segmented Control · Skeleton

Label

Item 1Item 2Item 3

tsx

import { SegmentedControl } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<SegmentedControl defaultValue="item-1">
			<SegmentedControl.Label>Label</SegmentedControl.Label>
			<SegmentedControl.Control>
				<SegmentedControl.Indicator />
				<SegmentedControl.Item value="item-1">
					<SegmentedControl.ItemText>Item 1</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="item-2">
					<SegmentedControl.ItemText>Item 2</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="item-3">
					<SegmentedControl.ItemText>Item 3</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
			</SegmentedControl.Control>
		</SegmentedControl>
	);
}

Label

Item 1 Item 2 Item 3

svelte

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

<SegmentedControl defaultValue="item-1">
	<SegmentedControl.Label>Label</SegmentedControl.Label>
	<SegmentedControl.Control>
		<SegmentedControl.Indicator />
		<SegmentedControl.Item value="item-1">
			<SegmentedControl.ItemText>Item 1</SegmentedControl.ItemText>
			<SegmentedControl.ItemHiddenInput />
		</SegmentedControl.Item>
		<SegmentedControl.Item value="item-2">
			<SegmentedControl.ItemText>Item 2</SegmentedControl.ItemText>
			<SegmentedControl.ItemHiddenInput />
		</SegmentedControl.Item>
		<SegmentedControl.Item value="item-3">
			<SegmentedControl.ItemText>Item 3</SegmentedControl.ItemText>
			<SegmentedControl.ItemHiddenInput />
		</SegmentedControl.Item>
	</SegmentedControl.Control>
</SegmentedControl>

Controlled

item-1item-2item-3

item-1

tsx

import { SegmentedControl } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

export default function Controlled() {
	const [value, setValue] = useState<string | null>('item-1');

	return (
		<div className="flex flex-col items-center gap-4">
			<SegmentedControl value={value} onValueChange={(details) => setValue(details.value)}>
				<SegmentedControl.Control>
					<SegmentedControl.Indicator />
					{['item-1', 'item-2', 'item-3'].map((item) => (
						<SegmentedControl.Item value={item} key={item}>
							<SegmentedControl.ItemText>{item}</SegmentedControl.ItemText>
							<SegmentedControl.ItemHiddenInput />
						</SegmentedControl.Item>
					))}
				</SegmentedControl.Control>
			</SegmentedControl>
			<pre className="pre">{value}</pre>
		</div>
	);
}

item-1 item-2 item-3

item-1

svelte

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

	let value = $state<string | null>('item-1');
</script>

<div class="flex flex-col items-center gap-4">
	<SegmentedControl {value} onValueChange={(details) => (value = details.value)}>
		<SegmentedControl.Control>
			<SegmentedControl.Indicator />
			{#each ['item-1', 'item-2', 'item-3'] as item (item)}
				<SegmentedControl.Item value={item}>
					<SegmentedControl.ItemText>{item}</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
			{/each}
		</SegmentedControl.Control>
	</SegmentedControl>
	<pre class="pre">{value}</pre>
</div>

Icons

tsx

import { SegmentedControl } from '@skeletonlabs/skeleton-react';
import { AlignStartVerticalIcon, AlignCenterVerticalIcon, AlignEndVerticalIcon } from 'lucide-react';

export default function Icons() {
	return (
		<SegmentedControl defaultValue="start">
			<SegmentedControl.Control>
				<SegmentedControl.Indicator />
				<SegmentedControl.Item value="start">
					<SegmentedControl.ItemText>
						<AlignStartVerticalIcon className="size-4" />
					</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="center">
					<SegmentedControl.ItemText>
						<AlignCenterVerticalIcon className="size-4" />
					</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="end">
					<SegmentedControl.ItemText>
						<AlignEndVerticalIcon className="size-4" />
					</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
			</SegmentedControl.Control>
		</SegmentedControl>
	);
}

svelte

<script lang="ts">
	import { AlignCenterVerticalIcon, AlignEndVerticalIcon, AlignStartVerticalIcon } from '@lucide/svelte';
	import { SegmentedControl } from '@skeletonlabs/skeleton-svelte';
</script>

<SegmentedControl defaultValue="start">
	<SegmentedControl.Control>
		<SegmentedControl.Indicator />
		<SegmentedControl.Item value="start">
			<SegmentedControl.ItemText>
				<AlignStartVerticalIcon class="size-4" />
			</SegmentedControl.ItemText>
			<SegmentedControl.ItemHiddenInput />
		</SegmentedControl.Item>
		<SegmentedControl.Item value="center">
			<SegmentedControl.ItemText>
				<AlignCenterVerticalIcon class="size-4" />
			</SegmentedControl.ItemText>
			<SegmentedControl.ItemHiddenInput />
		</SegmentedControl.Item>
		<SegmentedControl.Item value="end">
			<SegmentedControl.ItemText>
				<AlignEndVerticalIcon class="size-4" />
			</SegmentedControl.ItemText>
			<SegmentedControl.ItemHiddenInput />
		</SegmentedControl.Item>
	</SegmentedControl.Control>
</SegmentedControl>

Orientation

Item 1Item 2Item 3

tsx

import { SegmentedControl } from '@skeletonlabs/skeleton-react';

export default function Orientation() {
	return (
		<SegmentedControl defaultValue="item-1" orientation="vertical">
			<SegmentedControl.Control>
				<SegmentedControl.Indicator />
				<SegmentedControl.Item value="item-1">
					<SegmentedControl.ItemText>Item 1</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="item-2">
					<SegmentedControl.ItemText>Item 2</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
				<SegmentedControl.Item value="item-3">
					<SegmentedControl.ItemText>Item 3</SegmentedControl.ItemText>
					<SegmentedControl.ItemHiddenInput />
				</SegmentedControl.Item>
			</SegmentedControl.Control>
		</SegmentedControl>
	);
}

Item 1 Item 2 Item 3

svelte

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

<SegmentedControl defaultValue="item-1" orientation="vertical">
	<SegmentedControl.Control>
		<SegmentedControl.Indicator />
		<SegmentedControl.Item value="item-1">
			<SegmentedControl.ItemText>Item 1</SegmentedControl.ItemText>
			<SegmentedControl.ItemHiddenInput />
		</SegmentedControl.Item>
		<SegmentedControl.Item value="item-2">
			<SegmentedControl.ItemText>Item 2</SegmentedControl.ItemText>
			<SegmentedControl.ItemHiddenInput />
		</SegmentedControl.Item>
		<SegmentedControl.Item value="item-3">
			<SegmentedControl.ItemText>Item 3</SegmentedControl.ItemText>
			<SegmentedControl.ItemHiddenInput />
		</SegmentedControl.Item>
	</SegmentedControl.Control>
</SegmentedControl>

API Reference

Root

txt

flex flex-col gap-2 group

Prop	Default	Type
`ids`	—	Partial<{ root: string; label: string; indicator: string; item: (value: string) => string; itemLabel: (value: string) => string; itemControl: (value: string) => string; itemHiddenInput: (value: string) => string; }> \| undefined The ids of the elements in the radio. Useful for composition.
`value`	—	string \| null \| undefined The controlled value of the radio group
`defaultValue`	—	string \| null \| undefined The initial value of the checked radio when rendered. Use when you don't need to control the value of the radio group.
`name`	—	string \| undefined The name of the input fields in the radio (Useful for form submission).
`form`	—	string \| undefined The associate form of the underlying input.
`disabled`	—	boolean \| undefined If `true`, the radio group will be disabled
`readOnly`	—	boolean \| undefined Whether the checkbox is read-only
`onValueChange`	—	((details: ValueChangeDetails) => void) \| undefined Function called once a radio is checked
`orientation`	—	"horizontal" \| "vertical" \| undefined Orientation of the radio group
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	RadioGroupApi<PropTypes>
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	(ratingGroup: RadioGroupApi<PropTypes>) => ReactNode

Label

txt

label-text

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"span">) => Element) \| undefined Render the element yourself

Control

txt

inline-flex preset-outlined-surface-200-800 p-2 gap-2 rounded group-data-[orientation=horizontal]:flex-row group-data-[orientation=vertical]:flex-col

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Indicator

txt

top-(--top) left-(--left) w-(--width) h-(--height) preset-filled rounded data-disabled:opacity-50

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Item

txt

btn cursor-pointer z-10 flex-1 data-focus-visible:outline-2 data-focus-visible:outline-offset-1 data-focus-visible:outline-surface-950-50 data-readonly:pointer-events-none data-disabled:pointer-events-none data-disabled:opacity-50

Prop	Default	Type
`value`	—	string
`disabled`	—	boolean \| undefined
`invalid`	—	boolean \| undefined
`element`	—	((attributes: HTMLAttributes<"label">) => Element) \| undefined Render the element yourself

ItemText

txt

transition-colors data-[state=checked]:text-surface-contrast-950 data-[state=checked]:dark:text-surface-contrast-50

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"span">) => Element) \| undefined Render the element yourself

ItemHiddenInput

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"input">) => Element) \| undefined Render the element yourself

Root

txt

flex flex-col gap-2 group

Prop	Default	Type
`ids`	—	Partial<{ root: string; label: string; indicator: string; item: (value: string) => string; itemLabel: (value: string) => string; itemControl: (value: string) => string; itemHiddenInput: (value: string) => string; }> \| undefined The ids of the elements in the radio. Useful for composition.
`value`	—	string \| null \| undefined The controlled value of the radio group
`defaultValue`	—	string \| null \| undefined The initial value of the checked radio when rendered. Use when you don't need to control the value of the radio group.
`name`	—	string \| undefined The name of the input fields in the radio (Useful for form submission).
`form`	—	string \| undefined The associate form of the underlying input.
`disabled`	—	boolean \| undefined If `true`, the radio group will be disabled
`readOnly`	—	boolean \| undefined Whether the checkbox is read-only
`onValueChange`	—	((details: ValueChangeDetails) => void) \| undefined Function called once a radio is checked
`orientation`	—	"horizontal" \| "vertical" \| undefined Orientation of the radio group
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	() => RadioGroupApi<PropTypes>
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	Snippet<[() => RadioGroupApi<PropTypes>]>

Label

txt

label-text

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

Control

txt

inline-flex preset-outlined-surface-200-800 p-2 gap-2 rounded group-data-[orientation=horizontal]:flex-row group-data-[orientation=vertical]:flex-col

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Indicator

txt

top-(--top) left-(--left) w-(--width) h-(--height) preset-filled rounded data-disabled:opacity-50

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Item

txt

btn cursor-pointer z-10 flex-1 data-focus-visible:outline-2 data-focus-visible:outline-offset-1 data-focus-visible:outline-surface-950-50 data-readonly:pointer-events-none data-disabled:pointer-events-none data-disabled:opacity-50

Prop	Default	Type
`value`	—	string
`disabled`	—	boolean \| undefined
`invalid`	—	boolean \| undefined
`element`	—	Snippet<[HTMLAttributes<"label">]> \| undefined Render the element yourself

ItemText

txt

transition-colors data-[state=checked]:text-surface-contrast-950 data-[state=checked]:dark:text-surface-contrast-50

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

ItemHiddenInput

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"input">]> \| undefined Render the element yourself