Segmented Control Vue Component

Segmented control is a linear set of two or more segments (buttons), each of which functions as a mutually exclusive button. Within the control, all buttons are equal in width. Segmented controls are often used to display different views (switch tabs).

Contents

Segmented Components

There are following components included:

  • Segmented - segmented wrapper for buttons
  • SegmentedButton - single segmented button

Segmented Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.borderIosstring'border-primary'
colors.borderMaterialstring'border-md-light-outline dark:border-md-dark-outline'
colors.divideIosstring'divide-primary'
colors.divideMaterialstring'divide-md-light-outline dark:divide-md-dark-outline'
colors.strongBgIosstring'bg-black/5 dark:bg-white/10'
colors.strongBgMaterialstring'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.strongHighlightBgIosstring'bg-white dark:bg-white/75'
colors.strongHighlightBgMaterialstring'bg-white dark:bg-white/15'
componentstring'div'

Component's HTML Element

outlinebooleanfalse

Makes segmented outline

outlineIosbooleanfalse

Makes segmented outline in iOS theme

outlineMaterialbooleanfalse

Makes segmented outline in Material theme

raisedbooleanfalse

Makes segmented raised

raisedIosbooleanfalse

Makes segmented raised in iOS theme

raisedMaterialbooleanfalse

Makes segmented raised in Material theme

roundedbooleanfalse

Makes segmented rounded

roundedIosbooleanfalse

Makes segmented rounded in iOS theme

roundedMaterialbooleanfalse

Makes segmented rounded in Material theme

strongbooleanfalse

Makes segmented strong

strongIosbooleanfalse

Makes segmented strong in iOS theme

strongMaterialbooleanfalse

Makes segmented strong in Material theme

SegmentedButton Props

SegmentedButton component extends Button component, it supports all Button props and the following additional props:

NameTypeDefaultDescription
activebooleanfalse

Highlights button as active

componentstring'button'

Component's HTML Element

Examples

SegmentedControl.vue
<template>
  <k-page>
    <k-navbar title="Segmented Control" />


    <k-block-title>Default Segmented</k-block-title>
    <k-block strong inset class="space-y-4">
      <k-segmented>
        <k-segmented-button
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>


      <k-segmented rounded>
        <k-segmented-button
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>
    </k-block>


    <k-block-title>Raised Segmented</k-block-title>
    <k-block strong inset class="space-y-4">
      <k-segmented raised>
        <k-segmented-button
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>
      <k-segmented raised rounded>
        <k-segmented-button
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>
    </k-block>


    <k-block-title>Outline</k-block-title>
    <k-block strong inset class="space-y-4">
      <k-segmented outline>
        <k-segmented-button
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>
      <k-segmented rounded outline>
        <k-segmented-button
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>
    </k-block>


    <k-block-title>Strong Segmented</k-block-title>
    <k-block strong inset class="space-y-4">
      <k-segmented strong>
        <k-segmented-button
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>


      <k-segmented strong rounded>
        <k-segmented-button
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>
    </k-block>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kSegmented,
    kSegmentedButton,
    kBlock,
    kBlockTitle,
  } from 'konsta/vue';


  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kSegmented,
      kSegmentedButton,
      kBlock,
      kBlockTitle,
    },
    setup() {
      const activeSegmented = ref(1);
      return {
        activeSegmented,
      };
    },
  };
</script>
Code licensed under MIT.
2025 © Konsta UI by nolimits4web.