Toggle group

Shows a group of toggle buttons.

Examples

Basic toggle group

Code

<template>
  <TooltipProvider :delay-duration="100">
    <ToggleGroup v-model="value" :items="items" type="single" />
  </TooltipProvider>
</template>

<script setup lang="ts">
import { ToggleGroup } from '@/components/ui/toggle-group'
import { ref } from 'vue'
import { TooltipProvider } from '@/components/ui/tooltip'

const value = ref(null)

const items = [
  { value: 'left', icon: 'align-left', label: 'Left' },
  { value: 'center', icon: 'align-center', label: 'Center' },
  { value: 'right', icon: 'align-right', label: 'Right' }
]
</script>

Toggle group with multiple selection

Code

<template>
  <TooltipProvider :delay-duration="100">
    <ToggleGroup v-model="value" :items="items" />
  </TooltipProvider>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ToggleGroup } from '@/components/ui/toggle-group'
import { TooltipProvider } from '@/components/ui/tooltip'

const value = ref([])

const items = [
  { value: 'bold', icon: 'bold', label: 'Bold' },
  { value: 'italic', icon: 'italic', label: 'Italic' },
  { value: 'underline', icon: 'underline', label: 'Underline' }
]
</script>

Toggle group with text labels

Code

<template>
  <TooltipProvider :delay-duration="100">
    <ToggleGroup v-model="value" :items="items" />
  </TooltipProvider>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ToggleGroup } from '@/components/ui/toggle-group'
import { TooltipProvider } from '@/components/ui/tooltip'

const value = ref([])

const items = [
  { value: 'bold', label: 'Bold' },
  { value: 'italic', label: 'Italic' },
  { value: 'underline', label: 'Underline' }
]
</script>