GitHub54X

Segment Group

Vue segment group (segmented control) to switch between exclusive view or filter options.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/segment-group.json

Usage

      
      <script setup lang="ts">
import { SegmentGroup } from "@/components/ui/segment-group";
</script>

<template>
  <SegmentGroup.Root>
    <SegmentGroup.Indicator />
    <SegmentGroup.Item v-for="framework in frameworks" :key="framework" :value="framework">
      <SegmentGroup.ItemText>{{ framework }}</SegmentGroup.ItemText>
    </SegmentGroup.Item>
  </SegmentGroup.Root>
</template>

Composition

      
      SegmentGroup.Root
├── SegmentGroup.Indicator
└── SegmentGroup.Item
    └── SegmentGroup.ItemText

Examples

Controlled

To create a controlled SegmentGroup component, manage the current selected segment using the value prop and update it when the onValueChange event handler is called:

Root Provider

An alternative way to control the segment group is to use the RootProvider component and the useSegmentGroup hook. This way you can access the state and methods from outside the component.

Disabled

To disable a segment, simply pass the disabled prop to the SegmentGroup.Item component:

API

See Ark UI Segment Group docs for full props and examples.

ScrollSpySelect