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

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

# SelectLabel

**Type**: component

SelectLabel - Label for a group of select items Provides a non-selectable label for categorizing groups of options. Built on Radix UI Select.Label with muted styling and proper typography. Helps users understand the context of the options below and improves navigation for screen reader users.

## JSX Usage

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

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

## Component Props

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

## Examples

### Example 1
```tsx
// Basic group label
<SelectGroup>
  <SelectLabel>Countries</SelectLabel>
  <SelectItem value="us">United States</SelectItem>
  <SelectItem value="uk">United Kingdom</SelectItem>
  <SelectItem value="ca">Canada</SelectItem>
</SelectGroup>
```
### Example 2
```tsx
// Multiple labeled groups
<SelectContent>
  <SelectGroup>
    <SelectLabel>Primary Options</SelectLabel>
    <SelectItem value="primary1">Primary Choice 1</SelectItem>
    <SelectItem value="primary2">Primary Choice 2</SelectItem>
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup>
    <SelectLabel>Advanced Options</SelectLabel>
    <SelectItem value="advanced1">Advanced Choice 1</SelectItem>
    <SelectItem value="advanced2">Advanced Choice 2</SelectItem>
  </SelectGroup>
</SelectContent>
```
### Example 3
```tsx
// Custom styling with asChild
<SelectLabel asChild>
  <div className="flex items-center gap-1 px-2 py-1 font-semibold">
    <Icon className="size-3" />
    <span>Categories</span>
  </div>
</SelectLabel>
```