DropdownItemCheckbox

A menu item with a checkbox state for use inside DropdownMenu. Toggling the item does not close the menu, so users can check multiple options in one interaction.

ExamplesCodeUsageChangelog

Basic usage

badge=true, autoSave=false, compact=false

Tailwind v4

<script setup>
import { ref } from 'vue'
const showBadge = ref(true)
const autoSave = ref(false)
</script>

<template>
  <DropdownMenu>
    <template #trigger>
      <Button variant="secondary">View options</Button>
    </template>
    <DropdownItemCheckbox v-model="showBadge">Show badge count</DropdownItemCheckbox>
    <DropdownItemCheckbox v-model="autoSave">Auto-save changes</DropdownItemCheckbox>
  </DropdownMenu>
</template>

With description

Tailwind v4

<DropdownItemCheckbox v-model="showBadge" description="Show unread count on the icon">
  Notification badge
</DropdownItemCheckbox>

Disabled

Tailwind v4

<DropdownItemCheckbox :model-value="true" disabled>Always-on feature</DropdownItemCheckbox>

Props

Prop	Type	Default	Description
modelValue	boolean	false	Whether the item is checked
disabled	boolean	false	Prevents toggling and dims the item
description	string	—	Secondary text shown below the label

Emits

Event	Payload	Description
update:modelValue	boolean	New checked state after toggle

Slots

Slot	Description
default	Item label text