Radio items

The DropdownMenu component supports radio items using the DropdownMenu.RadioItem component. This allows you to create items with radio buttons that can be selected.

Properties

RadioGroup

The RadioGroup component groups together RadioItem components and controls the selected radio item.

<DropdownMenu.RadioGroup
  value                    // [OPTIONAL] the selected radio item
  onValueChange={onChange} // [OPTIONAL] callback when selection changes
  label="Group label"      // [OPTIONAL] label for the group
  className="my-class"     // [OPTIONAL] custom class
>
  {/* RadioItem components */}
</DropdownMenu.RadioGroup>

Prop	Required	Default	Type
value	false		string
onValueChange	false		(value: string) => void
label	false		string
className	false		string
children	true		ReactNode

RadioItem

The RadioItem component displays a radio button next to the item. When the user interacts with the radio button, the the onValueChange prop of the parent RadioGroup component is called with the value from the clicked RadioItem.

<DropdownMenu.RadioGroup
  value={currentItem}
  onValueChange={setCurrentItem}
>
  <DropdownMenu.RadioItem
    value="item-1"           // value of the item
    title="Item title"       // title of the item
    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
  >
    {/* Item content */}
  </DropdownMenu.RadioItem>
</DropdownMenu.RadioGroup>

Prop	Required	Default	Type
value	true		string
title	true		ReactNode
description	false		string
label	false		string
shortcut	false		string
checkmark	false	false	boolean
tag	false		TagProps
className	false		string
disabled	false	false	boolean