DropdownItemRadio

A menu item that acts as a radio option inside a DropdownMenu. Use multiple items with the same groupValue binding so only one can be selected at a time.

ExamplesCodeUsageChangelog

Basic usage

Selected: list

Tailwind v4

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

<template>
  <DropdownMenu>
    <template #trigger>
      <Button variant="secondary">View: {{ view }}</Button>
    </template>
    <DropdownItemRadio value="list" :group-value="view" @select="view = $event">List</DropdownItemRadio>
    <DropdownItemRadio value="grid" :group-value="view" @select="view = $event">Grid</DropdownItemRadio>
    <DropdownItemRadio value="board" :group-value="view" @select="view = $event">Board</DropdownItemRadio>
  </DropdownMenu>
</template>

With descriptions

Tailwind v4

<DropdownItemRadio value="newest" :group-value="sort" description="Most recent first" @select="sort = $event">
  Newest
</DropdownItemRadio>

With disabled option

Tailwind v4

<DropdownItemRadio value="popular" :group-value="sort" disabled @select="sort = $event">
  Most popular (coming soon)
</DropdownItemRadio>

Props

Prop	Type	Default	Description
value	string	—	The value this radio option represents
groupValue	string	—	The currently selected group value; when equal to value, the item appears selected
disabled	boolean	false	Prevents selection and dims the item
description	string	—	Secondary text shown below the label

Emits

Event	Payload	Description
select	string	The value of the item when selected

Slots

Slot	Description
default	Item label text