@neynar/ui/llm-docs/select-item.llm.md

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

# SelectItem

**Type**: component

SelectItem - Individual selectable option in the dropdown Represents a single option that users can select. Built on Radix UI Select.Item with enhanced styling including hover states, selection indicators, and proper spacing. Shows a checkmark when selected and supports keyboard navigation with proper focus management.

## JSX Usage

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

<SelectItem
  asChild={true}
  value="value"
  disabled={true}
  textValue="value"
>
  {/* Your content here */}
</SelectItem>
```

## Component Props

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

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

### disabled
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

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

## Examples

### Example 1
```tsx
// Basic item
<SelectItem value="apple">Apple</SelectItem>
```
### Example 2
```tsx
// Disabled item that cannot be selected
<SelectItem value="sold-out" disabled>
  Sold Out - Unavailable
</SelectItem>
```
### Example 3
```tsx
// Complex item content with custom text value for typeahead
<SelectItem value="user-123" textValue="John Doe">
  <div className="flex items-center gap-2">
    <Avatar size="sm" />
    <div>
      <div>John Doe</div>
      <div className="text-xs text-muted-foreground">john
### Example 4
```tsx
// Using asChild for custom item composition
<SelectItem value="custom" asChild>
  <div className="custom-item-styles">
    Custom item content
  </div>
</SelectItem>
```