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

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

# SelectGroup

**Type**: component

SelectGroup - Container for grouping related select items Groups related options together with an optional label for better organization and improved user experience when dealing with many options. Built on Radix UI Select.Group with semantic grouping that enhances screen reader navigation.

## JSX Usage

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

<SelectGroup
  asChild={true}
/>
```

## Component Props

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

## Examples

### Example 1
```tsx
// Basic group with label
<SelectGroup>
  <SelectLabel>Fruits</SelectLabel>
  <SelectItem value="apple">Apple</SelectItem>
  <SelectItem value="banana">Banana</SelectItem>
  <SelectItem value="orange">Orange</SelectItem>
</SelectGroup>
```
### Example 2
```tsx
// Multiple groups with separators
<SelectContent>
  <SelectGroup>
    <SelectLabel>Popular Choices</SelectLabel>
    <SelectItem value="most-popular">Most Popular</SelectItem>
    <SelectItem value="trending">Trending</SelectItem>
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup>
    <SelectLabel>All Options</SelectLabel>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectGroup>
</SelectContent>
```
### Example 3
```tsx
// Group without label for simple separation
<SelectGroup>
  <SelectItem value="item1">Item 1</SelectItem>
  <SelectItem value="item2">Item 2</SelectItem>
</SelectGroup>
```