Segmented Control

Experimental

Toggle buttons for switching between different values or views

<script setup lang="ts">
import { HSegmentedControl, type SegmentedControlItem } from '@holistics/design-system'
import { ref } from 'vue'

const items: SegmentedControlItem<number>[] = [
  {
    label: 'Label 1',
    icon: 'list-ul',
    value: 1,
    class: 'ci-item-1 ci-test-test',
  },
  {
    label: 'Label 2',
    icon: 'address-card',
    value: 2,
    tooltip: 'example tooltip',
  },
  {
    label: 'Label 3',
    icon: 'comment',
    value: 3,
    tooltip: {
      content: 'With shortcut',
      shortcuts: ['Ctrl + x'],
    },
  },
]

const value = ref(items[0].value)
</script>

<template>
  <HSegmentedControl
    v-model="value"
    :items="items"
  />
</template>

Examples

Size

<script setup lang="ts">
import { HSegmentedControl, type SegmentedControlItem } from '@holistics/design-system'
import { ref } from 'vue'

const items: SegmentedControlItem<number>[] = [
  {
    label: 'Label 1',
    icon: 'list-ul',
    value: 1,
    class: 'ci-item-1 ci-test-test',
  },
  {
    label: 'Label 2',
    icon: 'address-card',
    value: 2,
    tooltip: 'example tooltip',
  },
  {
    label: 'Label 3',
    icon: 'comment',
    value: 3,
    tooltip: {
      content: 'With shortcut',
      shortcuts: ['Ctrl + x'],
    },
  },
]

const value = ref(items[0].value)
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <HSegmentedControl
      v-model="value"
      :items="items"
      size="sm"
    />

    <HSegmentedControl
      v-model="value"
      :items="items"
      size="md"
    />
  </div>
</template>

Disabled

<script setup lang="ts">
import { HSegmentedControl, type SegmentedControlItem } from '@holistics/design-system'
import { ref } from 'vue'

const items: SegmentedControlItem<number>[] = [
  {
    label: 'Label 1',
    icon: 'list-ul',
    value: 1,
    class: 'ci-item-1 ci-test-test',
  },
  {
    label: 'Label 2',
    icon: 'address-card',
    value: 2,
    tooltip: 'example tooltip',
  },
  {
    label: 'Label 3',
    icon: 'comment',
    value: 3,
    tooltip: {
      content: 'With shortcut',
      shortcuts: ['Ctrl + x'],
    },
  },
]

const value = ref(items[0].value)
</script>

<template>
  <HSegmentedControl
    v-model="value"
    :items="items"
    disabled
  />
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
items *	SegmentedControlItem<unknown>[]
disabled	boolean = false
size	"sm" | "md" = "md"
modelValue	unknown

Events

Name	Parameters	Description
@update:modelValue	[value: unknown]