Segment

A segmented control for switching between a small set of options. Modern alternative to radio buttons or tabs.

Basic

Pass a simple array of strings or numbers. The component handles it automatically.

Selected: weekly

<script setup>
import { ref } from 'vue'
import { VxSegment } from 'veloxui'

const selected = ref('weekly')
</script>

<template>
  <VxSegment v-model="selected" :options="['daily', 'weekly', 'monthly']" />
</template>

Object Options

Use objects for more control — label, value, icon, and disabled.

<script setup>
import { ref } from 'vue'
const selected = ref('center')
</script>

<template>
  <VxSegment v-model="selected" :options="[
    { label: 'Left', value: 'left' },
    { label: 'Center', value: 'center' },
    { label: 'Right', value: 'right' },
    { label: 'Justify', value: 'justify', disabled: true },
  ]" />
</template>

With Icons

Add an icon field to each option.

<VxSegment v-model="view" :options="[
  { label: 'Grid', value: 'grid', icon: '▦' },
  { label: 'List', value: 'list', icon: '☰' },
  { label: 'Board', value: 'board', icon: '▣' },
]" />

Sizes

Three sizes: sm, default, and lg.

<VxSegment :options="options" size="sm" />
<VxSegment :options="options" />
<VxSegment :options="options" size="lg" />

Block

Use block to stretch the segment to full width with equal-sized options.

<VxSegment v-model="tab" :options="['all', 'active', 'completed', 'archived']" block />

Disabled

Disable the entire component or individual options.

<!-- Entire component disabled -->
<VxSegment :options="['one', 'two', 'three']" disabled />

<!-- Individual option disabled -->
<VxSegment :options="[
  { label: 'Light', value: 'light' },
  { label: 'Dark', value: 'dark' },
  { label: 'System', value: 'system', disabled: true },
]" />

Custom Content

Use the default slot for full control over each option's rendering. Receives option and active.

<VxSegment v-model="plan" :options="[
  { label: 'Monthly', value: 'monthly' },
  { label: 'Yearly', value: 'yearly' },
]">
  <template #default="{ option, active }">
    <div style="text-align: center;">
      <div style="font-weight: 600;">{{ option.label }}</div>
      <div v-if="option.value === 'yearly'" :style="{ color: active ? 'var(--primary)' : 'var(--muted-foreground)' }">
        Save 20%
      </div>
    </div>
  </template>
</VxSegment>

Custom Classes

Override any part of the segment with root-class, item-class, active-class, and indicator-class. Accepts strings, arrays, or objects — same as Vue's :class.

<template>
  <VxSegment
    v-model="tab"
    :options="['Overview', 'Details', 'Activity']"
    root-class="my-segment"
    item-class="my-item"
    active-class="my-active"
    indicator-class="my-indicator"
  />
</template>

<style>
.my-segment { background: color-mix(in srgb, var(--primary) 8%, transparent); border-radius: 14px; }
.my-indicator { background: var(--primary); border-radius: 12px; }
.my-active { color: var(--primary-foreground); }
.my-item { border-radius: 12px; }
</style>

Use Cases

Common patterns where segments work great:

View Toggle

Billing Interval

API

VxSegment Props

Prop	Type	Default	Description
v-model	string | number	—	Selected value
options	(string | number | SegmentOption)[]	[]	Array of options
size	'sm' | 'default' | 'lg'	'default'	Component size
block	boolean	false	Full-width with equal options
disabled	boolean	false	Disable entire component
root-class	string | string[] | object	—	Class binding on root container
item-class	string | string[] | object	—	Class binding on every item
active-class	string | string[] | object	—	Class binding on the active item
indicator-class	string | string[] | object	—	Class binding on the sliding indicator

SegmentOption

Property	Type	Required	Description
label	string	Yes	Display text
value	string | number	Yes	Option value
icon	string	No	Icon text (emoji or character)
disabled	boolean	No	Disable this option

Events

Event	Payload	Description
update:modelValue	string | number	Selected value changed
change	string | number	Selected value changed

Slots

Slot	Props	Description
default	{ option: SegmentOption, active: boolean }	Custom option content