0
# Interactive Items
1

2
Advanced menu items with checkbox, radio button, and visual indicator functionality for creating interactive menus with state management.
3

4
## Capabilities
5

6
### MenubarCheckboxItem (CheckboxItem)
7

8
Menu item with checkbox behavior for toggling boolean state, ideal for settings and preferences.
9

10
```typescript { .api }
11
/**
12
 * Menu item with checkbox behavior for toggling boolean values
13
 * @param props - Checkbox item props
14
 * @returns JSX element representing the checkbox menu item
15
 */
16
function MenubarCheckboxItem(props: MenubarCheckboxItemProps): React.ReactElement;
17

18
interface MenubarCheckboxItemProps extends React.ComponentPropsWithoutRef<'div'> {
19
  /** Whether the checkbox is checked */
20
  checked?: CheckedState;
21
  /** Callback fired when checked state changes */
22
  onCheckedChange?: (checked: CheckedState) => void;
23
  /** Whether the item is disabled */
24
  disabled?: boolean;
25
  /** Callback fired when the item is selected */
26
  onSelect?: (event: SelectEvent) => void;
27
  /** Text value for accessibility */
28
  textValue?: string;
29
}
30
```
31

32
**Usage Examples:**
33

34
```typescript
35
'use client';
36
import * as Menubar from "@radix-ui/react-menubar";
37

38
// Basic checkbox item
39
const [showLineNumbers, setShowLineNumbers] = React.useState(false);
40

41
<Menubar.CheckboxItem 
42
  checked={showLineNumbers}
43
  onCheckedChange={setShowLineNumbers}
44
>
45
  <Menubar.ItemIndicator>✓</Menubar.ItemIndicator>
46
  Show Line Numbers
47
</Menubar.CheckboxItem>
48

49
// Multiple checkbox items for preferences
50
function PreferencesMenu() {
51
  const [wordWrap, setWordWrap] = React.useState(true);
52
  const [autoSave, setAutoSave] = React.useState(false);
53
  const [darkMode, setDarkMode] = React.useState(true);
54

55
  return (
56
    <Menubar.Content>
57
      <Menubar.Label>Editor Settings</Menubar.Label>
58
      
59
      <Menubar.CheckboxItem checked={wordWrap} onCheckedChange={setWordWrap}>
60
        <Menubar.ItemIndicator>✓</Menubar.ItemIndicator>
61
        Word Wrap
62
      </Menubar.CheckboxItem>
63
      
64
      <Menubar.CheckboxItem checked={autoSave} onCheckedChange={setAutoSave}>
65
        <Menubar.ItemIndicator>✓</Menubar.ItemIndicator>
66
        Auto Save
67
      </Menubar.CheckboxItem>
68
      
69
      <Menubar.CheckboxItem checked={darkMode} onCheckedChange={setDarkMode}>
70
        <Menubar.ItemIndicator>✓</Menubar.ItemIndicator>
71
        Dark Mode
72
      </Menubar.CheckboxItem>
73
    </Menubar.Content>
74
  );
75
}
76
```
77

78
### MenubarRadioGroup (RadioGroup)
79

80
Container for radio items allowing single selection within a group.
81

82
```typescript { .api }
83
/**
84
 * Container for radio items with single selection behavior
85
 * @param props - Radio group props
86
 * @returns JSX element representing the radio group
87
 */
88
function MenubarRadioGroup(props: MenubarRadioGroupProps): React.ReactElement;
89

90
interface MenubarRadioGroupProps extends React.ComponentPropsWithoutRef<'div'> {
91
  /** Currently selected value */
92
  value?: string;
93
  /** Callback fired when selection changes */
94
  onValueChange?: (value: string) => void;
95
  /** Child radio items */
96
  children?: React.ReactNode;
97
}
98
```
99

100
### MenubarRadioItem (RadioItem)
101

102
Menu item with radio button behavior for single selection within a radio group.
103

104
```typescript { .api }
105
/**
106
 * Menu item with radio button behavior for single selection
107
 * @param props - Radio item props
108
 * @returns JSX element representing the radio menu item
109
 */
110
function MenubarRadioItem(props: MenubarRadioItemProps): React.ReactElement;
111

112
interface MenubarRadioItemProps extends React.ComponentPropsWithoutRef<'div'> {
113
  /** Value for this radio item */
114
  value: string;
115
  /** Whether the item is disabled */
116
  disabled?: boolean;
117
  /** Callback fired when the item is selected */
118
  onSelect?: (event: SelectEvent) => void;
119
  /** Text value for accessibility */
120
  textValue?: string;
121
}
122
```
123

124
**Usage Examples:**
125

126
```typescript
127
// Theme selection with radio group
128
function ThemeSelector() {
129
  const [theme, setTheme] = React.useState("light");
130

131
  return (
132
    <Menubar.Content>
133
      <Menubar.Label>Theme</Menubar.Label>
134
      <Menubar.RadioGroup value={theme} onValueChange={setTheme}>
135
        <Menubar.RadioItem value="light">
136
          <Menubar.ItemIndicator>•</Menubar.ItemIndicator>
137
          Light Theme
138
        </Menubar.RadioItem>
139
        
140
        <Menubar.RadioItem value="dark">
141
          <Menubar.ItemIndicator>•</Menubar.ItemIndicator>
142
          Dark Theme
143
        </Menubar.RadioItem>
144
        
145
        <Menubar.RadioItem value="auto">
146
          <Menubar.ItemIndicator>•</Menubar.ItemIndicator>
147
          Auto (System)
148
        </Menubar.RadioItem>
149
      </Menubar.RadioGroup>
150
    </Menubar.Content>
151
  );
152
}
153

154
// Font size selection
155
function FontSizeMenu() {
156
  const [fontSize, setFontSize] = React.useState("medium");
157

158
  return (
159
    <Menubar.RadioGroup value={fontSize} onValueChange={setFontSize}>
160
      <Menubar.RadioItem value="small">
161
        <Menubar.ItemIndicator>○</Menubar.ItemIndicator>
162
        Small (12px)
163
      </Menubar.RadioItem>
164
      
165
      <Menubar.RadioItem value="medium">
166
        <Menubar.ItemIndicator>○</Menubar.ItemIndicator>
167
        Medium (14px)
168
      </Menubar.RadioItem>
169
      
170
      <Menubar.RadioItem value="large">
171
        <Menubar.ItemIndicator>○</Menubar.ItemIndicator>
172
        Large (16px)
173
      </Menubar.RadioItem>
174
    </Menubar.RadioGroup>
175
  );
176
}
177
```
178

179
### MenubarItemIndicator (ItemIndicator)
180

181
Visual indicator for checked/selected state of checkbox and radio items, only rendered when the item is in checked state.
182

183
```typescript { .api }
184
/**
185
 * Visual indicator for checked/selected state of interactive items
186
 * @param props - Item indicator props
187
 * @returns JSX element representing the indicator (only when checked)
188
 */
189
function MenubarItemIndicator(props: MenubarItemIndicatorProps): React.ReactElement;
190

191
interface MenubarItemIndicatorProps extends React.ComponentPropsWithoutRef<'span'> {
192
  /** Content to show when item is checked/selected */
193
  children?: React.ReactNode;
194
  /** Whether to force show the indicator (renders even when not checked) */
195
  forceMount?: boolean;
196
}
197
```
198

199
**Usage Examples:**
200

201
```typescript
202
// Checkbox with checkmark indicator
203
<Menubar.CheckboxItem checked={isEnabled} onCheckedChange={setIsEnabled}>
204
  <Menubar.ItemIndicator>
205
    <CheckIcon />
206
  </Menubar.ItemIndicator>
207
  Enable Feature
208
</Menubar.CheckboxItem>
209

210
// Radio item with dot indicator
211
<Menubar.RadioItem value="option1">
212
  <Menubar.ItemIndicator>
213
    <DotIcon />
214
  </Menubar.ItemIndicator>
215
  Option 1
216
</Menubar.RadioItem>
217

218
// Custom styled indicators
219
<Menubar.CheckboxItem checked={showSidebar} onCheckedChange={setShowSidebar}>
220
  <Menubar.ItemIndicator className="custom-checkmark">
221
    ✓
222
  </Menubar.ItemIndicator>
223
  Show Sidebar
224
</Menubar.CheckboxItem>
225

226
// Force-mounted indicator (always visible)
227
<Menubar.ItemIndicator forceMount>
228
  <span style={{ opacity: isChecked ? 1 : 0 }}>✓</span>
229
</Menubar.ItemIndicator>
230
```
231

232
## Complete Interactive Menu Example
233

234
```typescript
235
function CompleteInteractiveMenu() {
236
  const [preferences, setPreferences] = React.useState({
237
    wordWrap: true,
238
    lineNumbers: false,
239
    autoSave: true,
240
    theme: "dark",
241
    fontSize: "medium"
242
  });
243

244
  return (
245
    <Menubar.Content>
246
      <Menubar.Label>View Options</Menubar.Label>
247
      
248
      <Menubar.CheckboxItem 
249
        checked={preferences.wordWrap}
250
        onCheckedChange={(checked) => 
251
          setPreferences(prev => ({ ...prev, wordWrap: checked }))
252
        }
253
      >
254
        <Menubar.ItemIndicator>✓</Menubar.ItemIndicator>
255
        Word Wrap
256
      </Menubar.CheckboxItem>
257
      
258
      <Menubar.CheckboxItem 
259
        checked={preferences.lineNumbers}
260
        onCheckedChange={(checked) => 
261
          setPreferences(prev => ({ ...prev, lineNumbers: checked }))
262
        }
263
      >
264
        <Menubar.ItemIndicator>✓</Menubar.ItemIndicator>
265
        Line Numbers
266
      </Menubar.CheckboxItem>
267

268
      <Menubar.Separator />
269

270
      <Menubar.Label>Theme Selection</Menubar.Label>
271
      <Menubar.RadioGroup 
272
        value={preferences.theme}
273
        onValueChange={(theme) => 
274
          setPreferences(prev => ({ ...prev, theme }))
275
        }
276
      >
277
        <Menubar.RadioItem value="light">
278
          <Menubar.ItemIndicator>•</Menubar.ItemIndicator>
279
          Light
280
        </Menubar.RadioItem>
281
        <Menubar.RadioItem value="dark">
282
          <Menubar.ItemIndicator>•</Menubar.ItemIndicator>
283
          Dark
284
        </Menubar.RadioItem>
285
      </Menubar.RadioGroup>
286
    </Menubar.Content>
287
  );
288
}
289
```
290

291
## Type Definitions
292

293
```typescript { .api }
294
// Element reference types
295
type MenubarCheckboxItemElement = HTMLDivElement;
296
type MenubarRadioGroupElement = HTMLDivElement;
297
type MenubarRadioItemElement = HTMLDivElement;
298
type MenubarItemIndicatorElement = HTMLSpanElement;
299

300
// State types
301
type CheckedState = boolean | 'indeterminate';
302

303
// Event types
304
interface SelectEvent {
305
  preventDefault(): void;
306
  target: HTMLElement;
307
}
308
```