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

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

Root

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

RootProvider

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

RootContext

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

Label

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

Control

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

Indicator

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

Item

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

ItemText

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

ItemHiddenInput

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

Skeleton

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Segmented Control

Icons

Orientation

Read Only

Disabled

Disabled Item

Direction

API Reference

Root

RootProvider

RootContext

Label

Control

Indicator

Item

ItemText

ItemHiddenInput