@neynar/ui/llm-docs/toggle-group-item.llm.md

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

# ToggleGroupItem

**Type**: component

Toggle Group Item - Individual selectable item within a ToggleGroup Represents a single toggleable option within a ToggleGroup component. Each item automatically inherits variant and size styling from the parent ToggleGroup context through React Context, but these can be overridden for specific styling needs. Supports flexible content including icons, text, or mixed combinations. The component participates in the parent ToggleGroup's keyboard navigation and selection behavior, with proper ARIA attributes for accessibility. Focus management and selection state are handled automatically by the Radix UI primitive.

## JSX Usage

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

<ToggleGroupItem
  className="value"
  value="value"
  disabled={true}
  variant={value}
  size={value}
  asChild={true}
>
  {/* Your content here */}
</ToggleGroupItem>
```

## Component Props

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

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

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

### variant
- **Type**: `"default" | "outline"`
- **Required**: No
- **Description**: No description available

### size
- **Type**: `"sm" | "default" | "lg"`
- **Required**: No
- **Description**: No description available

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

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