Checkbox items

The DropdownMenu component supports checkbox items using the DropdownMenu.CheckboxItem component. This allows you to create items with checkboxes that can be checked or unchecked.

Properties

CheckboxItem

The CheckboxItem component displays a checkbox next to the item. When the user interacts with the checkbox, the onCheckedChange prop is called. Setting the checked prop will set whether the checkbox is checked.

<DropdownMenu.CheckboxItem
  title="Item title"         // title of the item
  checked                    // [OPTIONAL] whether the checkbox is checked
  onCheckedChange={onChange} // [OPTIONAL] callback when checked state changes
  description="Description"  // [OPTIONAL] description text
  label="Label"              // [OPTIONAL] right-aligned label
  shortcut="⌘K"              // [OPTIONAL] keyboard shortcut
  checkmark                  // [OPTIONAL] show checkmark icon
  className="my-class"       // [OPTIONAL] custom class
  disabled                   // [OPTIONAL] disable the item
>
  {/* Optional nested items for submenu */}
</DropdownMenu.CheckboxItem>

Prop	Required	Default	Type
title	true		ReactNode
checked	false	false	boolean | 'indeterminate'
onCheckedChange	false		(checked: boolean) => void
description	false		string
label	false		string
shortcut	false		string
checkmark	false	false	boolean
tag	false		TagProps
className	false		string
disabled	false	false	boolean
children	false		ReactNode