SegmentedControl

A segmented control component for quickly switching between mutually exclusive options. Supports icons, sizes, vertical layout, and more.

Basic Usage

Bind the selected value via v-model and define the option list with options.

Show Code

<script setup lang="ts">
import { ref } from 'vue'
import { TSegmentedControl } from '@gulcc/tabler-vue'

const seg = ref('list')
const options = [
  { value: 'list', label: 'List' },
  { value: 'grid', label: 'Grid' },
  { value: 'card', label: 'Card' },
]
</script>

<template>
  <TSegmentedControl v-model="seg" :options="options" />
</template>

With Icons

Pass icon components (from @tabler/icons-vue) via the icon property of each option.

Show Code

<TSegmentedControl
  v-model="seg"
  :options="[
    { value: 'day', label: 'Day', icon: IconPhoto },
    { value: 'week', label: 'Week', icon: IconVideo },
    { value: 'month', label: 'Month', icon: IconMusic },
  ]"
/>

Fill Width

Set fill to evenly distribute options across the container width.

Show Code

<TSegmentedControl v-model="seg" fill :options="options" />

Vertical

Set vertical to switch to a vertical layout, suitable for sidebars.

Show Code

<TSegmentedControl v-model="seg" vertical :options="options" />

Size Variants

Control the size with the size prop: sm (small), md (default), lg (large).

Show Code

<TSegmentedControl v-model="seg" size="sm" :options="options" />
<TSegmentedControl v-model="seg" size="lg" :options="options" />

Disabled

Set disabled to disable all interactions, or use the disabled property on individual options.

Show Code

<!-- All disabled -->
<TSegmentedControl v-model="seg" disabled :options="options" />

<!-- Single item disabled -->
<TSegmentedControl
  v-model="seg"
  :options="[
    { value: 'a', label: 'A' },
    { value: 'b', label: 'B', disabled: true },
    { value: 'c', label: 'C' },
  ]"
/>

API

Props

Prop	Type	Default	Description
v-model / modelValue	string	''	Currently selected value
options	SegmentedOption[]	[]	Option list
name	string	'segmented'	Form name attribute
size	'sm' | 'md' | 'lg'	'md'	Size
vertical	boolean	false	Vertical layout
fill	boolean	false	Fill container width
disabled	boolean	false	Disable all interactions

SegmentedOption

Prop	Type	Default	Description
value	string	—	Option value
label	string	—	Display text
icon	Component	—	Icon component (from @tabler/icons-vue)
disabled	boolean	false	Disable this option

Emits

Event	Arguments	Description
update:modelValue	(value: string)	v-model update event
change	(value: string)	Fires when selected value changes