@neynar/ui/llm-docs/dropdown-menu-checkbox-item.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# DropdownMenuCheckboxItem

**Type**: component

A checkable menu item with visual state indication Displays a checkbox that can be toggled on/off. The checked state is visually indicated with a checkmark icon. Supports indeterminate state for partial selections. Ideal for menu options that represent toggleable settings, features, or multi-selection scenarios.

## JSX Usage

```jsx
import { DropdownMenuCheckboxItem } from '@neynar/ui';

<DropdownMenuCheckboxItem
  checked={value}
  onCheckedChange={handleCheckedChange}
  disabled={true}
  onSelect={handleSelect}
  textValue="value"
  inset={true}
  className="value"
>
  {/* Your content here */}
</DropdownMenuCheckboxItem>
```

## Component Props

### checked
- **Type**: `boolean | "indeterminate"`
- **Required**: No
- **Description**: The checked state of the checkbox item (boolean or "indeterminate")

### onCheckedChange
- **Type**: `(checked: boolean) => void`
- **Required**: No
- **Description**: Callback fired when the checked state changes

### disabled
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether the item is disabled and cannot be interacted with

### onSelect
- **Type**: `(event: Event) => void`
- **Required**: No
- **Description**: Callback fired when the item is selected via click or keyboard

### textValue
- **Type**: `string`
- **Required**: No
- **Description**: Optional text value used for typeahead search functionality

### inset
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether to add extra left padding to align with items that have icons

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic checkbox item with state
const [showSidebar, setShowSidebar] = useState(true);
<DropdownMenuCheckboxItem
  checked={showSidebar}
  onCheckedChange={setShowSidebar}
>
  <Sidebar className="mr-2 h-4 w-4" />
  Show Sidebar
</DropdownMenuCheckboxItem>
```
### Example 2
```tsx
// Multiple checkbox items for feature toggles
const [features, setFeatures] = useState({
  notifications: true,
  autoSave: false,
  darkMode: true
});
<DropdownMenuCheckboxItem
  checked={features.notifications}
  onCheckedChange={(checked) => setFeatures(prev => ({ ...prev, notifications: checked }))}
>
  Enable Notifications
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
  checked={features.autoSave}
  onCheckedChange={(checked) => setFeatures(prev => ({ ...prev, autoSave: checked }))}
>
  Auto-save Changes
</DropdownMenuCheckboxItem>
```
### Example 3
```tsx
// Indeterminate state for partial selections
<DropdownMenuCheckboxItem
  checked="indeterminate"
  onCheckedChange={handleSelectAll}
>
  Select All Items (Some selected)
</DropdownMenuCheckboxItem>
```