Segment group

Switch between a few options with a sliding indicator.

React, Vue, Solid, and Svelte

SourceRecipeArk UI docs

Built on Ark UI's SegmentGroup. SegmentGroup.Indicator slides to the selected item.

Usage

import { SegmentGroup } from "@isbatak/react-ui/segment-group"

export function SegmentGroupDemo() {
  return (
    <SegmentGroup.Root defaultValue="week" orientation="horizontal" aria-label="Range">
      <SegmentGroup.Indicator />
      <SegmentGroup.Item value="day">
        <SegmentGroup.ItemText>Day</SegmentGroup.ItemText>
        <SegmentGroup.ItemHiddenInput />
      </SegmentGroup.Item>
      <SegmentGroup.Item value="week">
        <SegmentGroup.ItemText>Week</SegmentGroup.ItemText>
        <SegmentGroup.ItemHiddenInput />
      </SegmentGroup.Item>
      <SegmentGroup.Item value="month">
        <SegmentGroup.ItemText>Month</SegmentGroup.ItemText>
        <SegmentGroup.ItemHiddenInput />
      </SegmentGroup.Item>
    </SegmentGroup.Root>
  )
}