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

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

# ToggleGroup

**Type**: component

Toggle Group - A group of toggle buttons with single or multiple selection ToggleGroup provides a way to group related toggle buttons together, allowing users to select from a set of mutually exclusive options (single selection) or independent options (multiple selection). Built on Radix UI Toggle Group primitive with enhanced styling through CVA variants and full accessibility support including keyboard navigation. The component supports both controlled and uncontrolled usage patterns, with automatic focus management and roving tabindex behavior. Visual variants are inherited by all child items but can be overridden per item if needed.

## JSX Usage

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

<ToggleGroup
  className="value"
  type={value}
  variant={value}
  size={value}
  defaultValue={[]}
  value={[]}
  onValueChange={handleValueChange}
  disabled={true}
  rovingFocus={true}
  orientation={value}
  dir={value}
  loop={true}
  asChild={true}
>
  {/* Your content here */}
</ToggleGroup>
```

## Component Props

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

### type
- **Type**: `"single" | "multiple"`
- **Required**: Yes
- **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

### defaultValue
- **Type**: `string | string[]`
- **Required**: No
- **Description**: No description available

### value
- **Type**: `string | string[]`
- **Required**: No
- **Description**: No description available

### onValueChange
- **Type**: `(value: string | string[]) => void`
- **Required**: No
- **Description**: No description available

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

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

### orientation
- **Type**: `"horizontal" | "vertical"`
- **Required**: No
- **Description**: No description available

### dir
- **Type**: `"ltr" | "rtl"`
- **Required**: No
- **Description**: No description available

### loop
- **Type**: `boolean`
- **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