Segmented Control

Label

Item 1 Item 2 Item 3

<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>

Icons

<script lang="ts">
  import AlignCenterVerticalIcon from '@lucide/svelte/icons/align-center-vertical';
  import AlignEndVerticalIcon from '@lucide/svelte/icons/align-end-vertical';
  import AlignStartVerticalIcon from '@lucide/svelte/icons/align-start-vertical';
  import { SegmentedControl } from '@skeletonlabs/skeleton-svelte';
</script>

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

Orientation

Item 1 Item 2 Item 3

<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>

Read Only

Item 1 Item 2 Item 3

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

<SegmentedControl defaultValue="item-1" readOnly>
  <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>

Disabled

Item 1 Item 2 Item 3

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

<SegmentedControl defaultValue="item-1" disabled>
  <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>

Disabled Item

Item 1 Item 2 Item 3

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

<SegmentedControl defaultValue="item-1">
  <SegmentedControl.Control>
    <SegmentedControl.Indicator />
    <SegmentedControl.Item value="item-1">
      <SegmentedControl.ItemText>Item 1</SegmentedControl.ItemText>
      <SegmentedControl.ItemHiddenInput />
    </SegmentedControl.Item>
    <SegmentedControl.Item value="item-2" disabled>
      <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>

Direction

Label

Item 1 Item 2 Item 3

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

<SegmentedControl defaultValue="item-1" dir="rtl">
  <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>

API Reference

SegmentedControlRootProvider

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

SegmentedControlRoot

flex flex-col gap-2 group

Property	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

SegmentedControlRootContext

Property	Default	Type
`children`	-	Snippet<[() => RadioGroupApi<PropTypes>]>

SegmentedControlLabel

label-text

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

SegmentedControlControl

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

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

SegmentedControlIndicator

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

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

SegmentedControlItem

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

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

SegmentedControlItemText

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

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

SegmentedControlItemHiddenInput

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