Skip to main content

​
Usage

The VSlideGroup component creates a horizontally or vertically scrollable container with optional navigation arrows. 
<template>
  <v-slide-group v-model="model">
    <v-slide-group-item
      v-for="n in 15"
      :key="n"
      :value="n"
    >
      <v-btn>Item {{ n }}</v-btn>
    </v-slide-group-item>
  </v-slide-group>
</template>

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

​
Show Arrows

Display navigation arrows: 
<template>
  <v-slide-group show-arrows>
    <v-slide-group-item
      v-for="n in 15"
      :key="n"
    >
      <v-chip class="ma-2">Item {{ n }}</v-chip>
    </v-slide-group-item>
  </v-slide-group>
</template>

​
Center Active

Center the active item: 
<template>
  <v-slide-group
    v-model="model"
    center-active
    show-arrows
  >
    <v-slide-group-item
      v-for="n in 15"
      :key="n"
      :value="n"
    >
      <v-btn>Item {{ n }}</v-btn>
    </v-slide-group-item>
  </v-slide-group>
</template>

​
Multiple Selection

Allow multiple items to be selected: 
<template>
  <v-slide-group
    v-model="model"
    multiple
    show-arrows
  >
    <v-slide-group-item
      v-for="n in 15"
      :key="n"
      :value="n"
      v-slot="{ isSelected, toggle }"
    >
      <v-btn
        :color="isSelected ? 'primary' : undefined"
        @click="toggle"
      >
        Item {{ n }}
      </v-btn>
    </v-slide-group-item>
  </v-slide-group>
</template>

<script setup>
import { ref } from 'vue'
const model = ref([])
</script>

​
Vertical Direction

Create a vertical slide group: 
<template>
  <v-slide-group
    direction="vertical"
    show-arrows
    style="height: 400px"
  >
    <v-slide-group-item
      v-for="n in 15"
      :key="n"
    >
      <v-btn>Item {{ n }}</v-btn>
    </v-slide-group-item>
  </v-slide-group>
</template>

​
Props

​
modelValue
any
The v-model value of the selected item(s)
​
direction
'horizontal' | 'vertical'
default:"horizontal"
The direction of the slide group
​
showArrows
boolean | string
When to show navigation arrows. Values: true, false, ‘always’, ‘desktop’, ‘mobile’, ‘never’
​
centerActive
boolean
default:"false"
Centers the active item in the viewport when selected
​
scrollToActive
boolean
default:"true"
Automatically scrolls to the active item when it changes
​
nextIcon
IconValue
default:"$next"
Icon used for the next arrow
​
prevIcon
IconValue
default:"$prev"
Icon used for the previous arrow
​
contentClass
string
CSS class to apply to the content wrapper
​
selectedClass
string
default:"v-slide-group-item--active"
CSS class applied to selected items
​
multiple
boolean
default:"false"
Allows multiple selections
​
mandatory
boolean | 'force'
default:"false"
Forces at least one item to always be selected
​
max
number
Maximum number of selections allowed (when multiple is enabled)
​
disabled
boolean
default:"false"
Disables all items in the group
​
mobile
boolean
Manually set mobile mode for responsive arrow behavior
​
tag
string
default:"div"
Specify a custom tag used on the root element

​
Slots

​
default
slot
The default slot for slide group items
​
prev
slot
Slot to customize the previous arrow button
​
next
slot
Slot to customize the next arrow button

​
Events

​
update:modelValue
event
Emitted when the selected value changes
VSlideGroup is the foundation for components like VTabs and VChipGroup. It provides the scrolling and selection logic for horizontally or vertically scrollable content.
The component supports keyboard navigation. Use arrow keys to navigate between items when focused.

Build docs developers (and LLMs) love

Get started for freeTalk to us