0
# Menu Items
1

2
Individual menu items including basic items, checkbox items, radio items, and their indicators. These components represent the interactive elements within dropdown menus.
3

4
## Capabilities
5

6
### DropdownMenuItem (Item)
7

8
Basic menu item component that can be clicked or selected via keyboard navigation.
9

10
```typescript { .api }
11
/**
12
 * Basic interactive menu item
13
 * @param disabled - Whether the item is disabled
14
 * @param onSelect - Callback when item is selected
15
 * @param textValue - Text value for typeahead functionality
16
 * @param asChild - Compose with child element
17
 */
18
interface DropdownMenuItemProps {
19
  disabled?: boolean;
20
  onSelect?: (event: Event) => void;
21
  textValue?: string;
22
  asChild?: boolean;
23
  children?: React.ReactNode;
24
}
25

26
const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps>;
27
```
28

29
**Usage Examples:**
30

31
```typescript
32
// Basic menu item
33
<DropdownMenu.Item onSelect={() => console.log('Selected')}>
34
  New File
35
</DropdownMenu.Item>
36

37
// Disabled item
38
<DropdownMenu.Item disabled>
39
  Unavailable Option
40
</DropdownMenu.Item>
41

42
// Custom item using asChild
43
<DropdownMenu.Item asChild>
44
  <a href="/settings">Settings</a>
45
</DropdownMenu.Item>
46

47
// Item with custom text value for typeahead
48
<DropdownMenu.Item textValue="Copy to clipboard">
49
  📋 Copy
50
</DropdownMenu.Item>
51
```
52

53
### DropdownMenuCheckboxItem (CheckboxItem)
54

55
Menu item with checkbox functionality for toggling boolean states.
56

57
```typescript { .api }
58
/**
59
 * Menu item with checkbox functionality
60
 * @param checked - Controlled checked state
61
 * @param onCheckedChange - Callback when checked state changes
62
 * @param disabled - Whether the item is disabled
63
 * @param onSelect - Callback when item is selected
64
 * @param textValue - Text value for typeahead functionality
65
 */
66
interface DropdownMenuCheckboxItemProps {
67
  checked?: boolean | 'indeterminate';
68
  onCheckedChange?: (checked: boolean) => void;
69
  disabled?: boolean;
70
  onSelect?: (event: Event) => void;
71
  textValue?: string;
72
  children?: React.ReactNode;
73
}
74

75
const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps>;
76
```
77

78
**Usage Examples:**
79

80
```typescript
81
const [showBookmarks, setShowBookmarks] = React.useState(true);
82
const [showHistory, setShowHistory] = React.useState(false);
83

84
<DropdownMenu.CheckboxItem 
85
  checked={showBookmarks}
86
  onCheckedChange={setShowBookmarks}
87
>
88
  <DropdownMenu.ItemIndicator>
89
    ✓
90
  </DropdownMenu.ItemIndicator>
91
  Show Bookmarks
92
</DropdownMenu.CheckboxItem>
93

94
<DropdownMenu.CheckboxItem 
95
  checked={showHistory}
96
  onCheckedChange={setShowHistory}
97
>
98
  <DropdownMenu.ItemIndicator>
99
    ✓
100
  </DropdownMenu.ItemIndicator>
101
  Show History
102
</DropdownMenu.CheckboxItem>
103
```
104

105
### DropdownMenuRadioGroup (RadioGroup)
106

107
Container component for grouping radio button menu items with shared state.
108

109
```typescript { .api }
110
/**
111
 * Container for radio button menu items
112
 * @param value - Currently selected value
113
 * @param onValueChange - Callback when selected value changes
114
 */
115
interface DropdownMenuRadioGroupProps {
116
  value?: string;
117
  onValueChange?: (value: string) => void;
118
  children?: React.ReactNode;
119
}
120

121
const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuRadioGroupProps>;
122
```
123

124
### DropdownMenuRadioItem (RadioItem)
125

126
Individual radio button menu item within a RadioGroup.
127

128
```typescript { .api }
129
/**
130
 * Radio button menu item
131
 * @param value - Value of this radio item
132
 * @param disabled - Whether the item is disabled
133
 * @param onSelect - Callback when item is selected
134
 * @param textValue - Text value for typeahead functionality
135
 */
136
interface DropdownMenuRadioItemProps {
137
  value: string;
138
  disabled?: boolean;
139
  onSelect?: (event: Event) => void;
140
  textValue?: string;
141
  children?: React.ReactNode;
142
}
143

144
const DropdownMenuRadioItem: React.ForwardRefExoticComponent<DropdownMenuRadioItemProps>;
145
```
146

147
**Usage Examples:**
148

149
```typescript
150
const [theme, setTheme] = React.useState('light');
151

152
<DropdownMenu.RadioGroup value={theme} onValueChange={setTheme}>
153
  <DropdownMenu.RadioItem value="light">
154
    <DropdownMenu.ItemIndicator>
155
      ●
156
    </DropdownMenu.ItemIndicator>
157
    Light Theme
158
  </DropdownMenu.RadioItem>
159
  
160
  <DropdownMenu.RadioItem value="dark">
161
    <DropdownMenu.ItemIndicator>
162
      ●
163
    </DropdownMenu.ItemIndicator>
164
    Dark Theme
165
  </DropdownMenu.RadioItem>
166
  
167
  <DropdownMenu.RadioItem value="system">
168
    <DropdownMenu.ItemIndicator>
169
      ●
170
    </DropdownMenu.ItemIndicator>
171
    System Theme
172
  </DropdownMenu.RadioItem>
173
</DropdownMenu.RadioGroup>
174
```
175

176
### DropdownMenuItemIndicator (ItemIndicator)
177

178
Visual indicator component that appears when checkbox or radio items are selected.
179

180
```typescript { .api }
181
/**
182
 * Visual indicator for checkbox/radio items
183
 * Only rendered when parent item is in checked/selected state
184
 * @param forceMount - Force mounting even when not indicated
185
 */
186
interface DropdownMenuItemIndicatorProps {
187
  forceMount?: boolean;
188
  children?: React.ReactNode;
189
}
190

191
const DropdownMenuItemIndicator: React.ForwardRefExoticComponent<DropdownMenuItemIndicatorProps>;
192
```
193

194
**Usage Examples:**
195

196
```typescript
197
// Checkbox indicator
198
<DropdownMenu.CheckboxItem checked={isChecked}>
199
  <DropdownMenu.ItemIndicator>
200
    <CheckIcon />
201
  </DropdownMenu.ItemIndicator>
202
  Enable Feature
203
</DropdownMenu.CheckboxItem>
204

205
// Radio indicator
206
<DropdownMenu.RadioItem value="option1">
207
  <DropdownMenu.ItemIndicator>
208
    <DotIcon />
209
  </DropdownMenu.ItemIndicator>
210
  Option 1
211
</DropdownMenu.RadioItem>
212

213
// Force-mounted indicator
214
<DropdownMenu.ItemIndicator forceMount>
215
  <Icon />
216
</DropdownMenu.ItemIndicator>
217
```
218

219
## Component Aliases
220

221
```typescript { .api }
222
// Short aliases for composition patterns
223
const Item = DropdownMenuItem;
224
const CheckboxItem = DropdownMenuCheckboxItem;
225
const RadioGroup = DropdownMenuRadioGroup;
226
const RadioItem = DropdownMenuRadioItem;
227
const ItemIndicator = DropdownMenuItemIndicator;
228
```
229

230
These item components provide the interactive elements within dropdown menus and support various selection patterns including single selection, multi-selection with checkboxes, and exclusive selection with radio buttons.