# Menu Items

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

## Capabilities

### DropdownMenuItem (Item)

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

```typescript { .api }
/**
 * Basic interactive menu item
 * @param disabled - Whether the item is disabled
 * @param onSelect - Callback when item is selected
 * @param textValue - Text value for typeahead functionality
 * @param asChild - Compose with child element
 */
interface DropdownMenuItemProps {
  disabled?: boolean;
  onSelect?: (event: Event) => void;
  textValue?: string;
  asChild?: boolean;
  children?: React.ReactNode;
}

const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps>;
```

**Usage Examples:**

```typescript
// Basic menu item
<DropdownMenu.Item onSelect={() => console.log('Selected')}>
  New File
</DropdownMenu.Item>

// Disabled item
<DropdownMenu.Item disabled>
  Unavailable Option
</DropdownMenu.Item>

// Custom item using asChild
<DropdownMenu.Item asChild>
  <a href="/settings">Settings</a>
</DropdownMenu.Item>

// Item with custom text value for typeahead
<DropdownMenu.Item textValue="Copy to clipboard">
  📋 Copy
</DropdownMenu.Item>
```

### DropdownMenuCheckboxItem (CheckboxItem)

Menu item with checkbox functionality for toggling boolean states.

```typescript { .api }
/**
 * Menu item with checkbox functionality
 * @param checked - Controlled checked state
 * @param onCheckedChange - Callback when checked state changes
 * @param disabled - Whether the item is disabled
 * @param onSelect - Callback when item is selected
 * @param textValue - Text value for typeahead functionality
 */
interface DropdownMenuCheckboxItemProps {
  checked?: boolean | 'indeterminate';
  onCheckedChange?: (checked: boolean) => void;
  disabled?: boolean;
  onSelect?: (event: Event) => void;
  textValue?: string;
  children?: React.ReactNode;
}

const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps>;
```

**Usage Examples:**

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

<DropdownMenu.CheckboxItem 
  checked={showBookmarks}
  onCheckedChange={setShowBookmarks}
>
  <DropdownMenu.ItemIndicator>
    ✓
  </DropdownMenu.ItemIndicator>
  Show Bookmarks
</DropdownMenu.CheckboxItem>

<DropdownMenu.CheckboxItem 
  checked={showHistory}
  onCheckedChange={setShowHistory}
>
  <DropdownMenu.ItemIndicator>
    ✓
  </DropdownMenu.ItemIndicator>
  Show History
</DropdownMenu.CheckboxItem>
```

### DropdownMenuRadioGroup (RadioGroup)

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

```typescript { .api }
/**
 * Container for radio button menu items
 * @param value - Currently selected value
 * @param onValueChange - Callback when selected value changes
 */
interface DropdownMenuRadioGroupProps {
  value?: string;
  onValueChange?: (value: string) => void;
  children?: React.ReactNode;
}

const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuRadioGroupProps>;
```

### DropdownMenuRadioItem (RadioItem)

Individual radio button menu item within a RadioGroup.

```typescript { .api }
/**
 * Radio button menu item
 * @param value - Value of this radio item
 * @param disabled - Whether the item is disabled
 * @param onSelect - Callback when item is selected
 * @param textValue - Text value for typeahead functionality
 */
interface DropdownMenuRadioItemProps {
  value: string;
  disabled?: boolean;
  onSelect?: (event: Event) => void;
  textValue?: string;
  children?: React.ReactNode;
}

const DropdownMenuRadioItem: React.ForwardRefExoticComponent<DropdownMenuRadioItemProps>;
```

**Usage Examples:**

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

<DropdownMenu.RadioGroup value={theme} onValueChange={setTheme}>
  <DropdownMenu.RadioItem value="light">
    <DropdownMenu.ItemIndicator>
      ●
    </DropdownMenu.ItemIndicator>
    Light Theme
  </DropdownMenu.RadioItem>
  
  <DropdownMenu.RadioItem value="dark">
    <DropdownMenu.ItemIndicator>
      ●
    </DropdownMenu.ItemIndicator>
    Dark Theme
  </DropdownMenu.RadioItem>
  
  <DropdownMenu.RadioItem value="system">
    <DropdownMenu.ItemIndicator>
      ●
    </DropdownMenu.ItemIndicator>
    System Theme
  </DropdownMenu.RadioItem>
</DropdownMenu.RadioGroup>
```

### DropdownMenuItemIndicator (ItemIndicator)

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

```typescript { .api }
/**
 * Visual indicator for checkbox/radio items
 * Only rendered when parent item is in checked/selected state
 * @param forceMount - Force mounting even when not indicated
 */
interface DropdownMenuItemIndicatorProps {
  forceMount?: boolean;
  children?: React.ReactNode;
}

const DropdownMenuItemIndicator: React.ForwardRefExoticComponent<DropdownMenuItemIndicatorProps>;
```

**Usage Examples:**

```typescript
// Checkbox indicator
<DropdownMenu.CheckboxItem checked={isChecked}>
  <DropdownMenu.ItemIndicator>
    <CheckIcon />
  </DropdownMenu.ItemIndicator>
  Enable Feature
</DropdownMenu.CheckboxItem>

// Radio indicator
<DropdownMenu.RadioItem value="option1">
  <DropdownMenu.ItemIndicator>
    <DotIcon />
  </DropdownMenu.ItemIndicator>
  Option 1
</DropdownMenu.RadioItem>

// Force-mounted indicator
<DropdownMenu.ItemIndicator forceMount>
  <Icon />
</DropdownMenu.ItemIndicator>
```

## Component Aliases

```typescript { .api }
// Short aliases for composition patterns
const Item = DropdownMenuItem;
const CheckboxItem = DropdownMenuCheckboxItem;
const RadioGroup = DropdownMenuRadioGroup;
const RadioItem = DropdownMenuRadioItem;
const ItemIndicator = DropdownMenuItemIndicator;
```

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.