Sections

Components

Utilities

Forms

Hooks

useIsMobile

Segment Group

Copy Markdown

Follows the selected item.

Docs API

PreviewCode

Profile

Account

Security

Notifications

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/segment-group

Anatomy#

SegmentGroup
└── SegmentGroupItem
    └── SegmentGroupItemText

Usage#

import {
  SegmentGroup,
  SegmentGroupIndicator,
  SegmentGroupItem,
  SegmentGroupItemText,
} from "@/components/ui/segment-group";

<SegmentGroup>
  <SegmentGroupIndicator />
  <SegmentGroupItem value="profile">
    <SegmentGroupItemText />
  </SegmentGroupItem>
  <SegmentGroupItem value="account">
    <SegmentGroupItemText />
  </SegmentGroupItem>
</SegmentGroup>

Controlled#

Control the selected value programmatically with value and onValueChange props.

PreviewCode

Profile

Account

Security

Notifications

States#

Disabled#

Use the disabled prop to disable the entire segment group.

PreviewCode

Profile

Account

Security

Notifications

Disabled Item#

Use the disabled prop on individual items to disable specific options.

PreviewCode

Profile

Account

Security

Notifications

Variant#

Default#

PreviewCode

Profile

Account

Security

Notifications

Underline#

PreviewCode

Profile

Account

Security

Notifications

Orientation#

Use orientation to change the direction of the items.

Horizontal#

PreviewCode

Profile

Account

Security

Notifications

Vertical#

PreviewCode

Profile

Account

Security

Notifications

Vertical with Underline#

PreviewCode

Profile

Account

Security

Notifications

Examples#

Indicator on Hover#

The indicator follows the mouse and returns to the selected item when not hovering.

PreviewCode

Profile

Account

Security

Notifications

Custom Indicator#

Use *:data-[slot=segment-group-indicator]:bg-* classes to change the color of the indicator.

PreviewCode

Profile

Account

Security

Notifications

API Reference#

SegmentGroup#

Root component. Manages segmented control state (single or multi-select).

Prop	Type	Default
`defaultValue`	`string`	-
`value`	`string`	-
`onValueChange`	`(details: ValueChangeDetails) => void`	-
`orientation`	`"horizontal"	"vertical"`
`variant`	`"default"	"underline"`
`disabled`	`boolean`	-
`className`	`string`	-
`asChild`	`boolean`	-

SegmentGroupIndicator#

Visual indicator that moves to the selected segment(s).

Prop	Type	Default
`asChild`	`boolean`	-
`className`	`string`	-

SegmentGroupItem#

Single segment option. Use value for selection.

Prop	Type	Default
`value`	`string`	-
`disabled`	`boolean`	-
`className`	`string`	-
`asChild`	`boolean`	-

SegmentGroupItemText#

Text label for a segment. Often wraps icon + text.

Prop	Type	Default
`className`	`string`	-
`asChild`	`boolean`	-

For a complete list of props, see the Ark UI documentation.

[

Scroll Area ](/docs/components/scroll-area)[

Select ](/docs/components/select)

On This Page

Installation Anatomy Usage Controlled States Disabled Disabled Item Variant Default Underline Orientation Horizontal Vertical Vertical with Underline Examples Indicator on Hover Custom Indicator API Reference SegmentGroup SegmentGroupIndicator SegmentGroupItem SegmentGroupItemText