Segmented Control

Label

Item 1Item 2Item 3

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>
  );
}

Icons

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 />
          </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 1Item 2Item 3

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>
  );
}

Read Only

Item 1Item 2Item 3

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

export default function ReadOnly() {
  return (
    <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 1Item 2Item 3

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

export default function Disabled() {
  return (
    <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 1Item 2Item 3

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

export default function DisabledItem() {
  return (
    <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 1Item 2Item 3

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

export default function Dir() {
  return (
    <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

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`	-	((attributes: HTMLAttributes<"div">) => Element) \| 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`	-	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

SegmentedControlItemHiddenInput

Property	Default	Type
`element`	-	((attributes: HTMLAttributes<"input">) => Element) \| 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`	-	((attributes: HTMLAttributes<"span">) => Element) \| 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`	-	((attributes: HTMLAttributes<"label">) => Element) \| undefined Render the element yourself

SegmentedControlLabel

label-text

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

SegmentedControlRootProvider

Property	Default	Type
`value`	-	RadioGroupApi<PropTypes>
`element`	-	((attributes: HTMLAttributes<"div">) => Element) \| 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`	-	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

SegmentedControlRootContext

Property	Default	Type
`children`	-	(ratingGroup: RadioGroupApi<PropTypes>) => ReactNode