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

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

# Select

**Type**: component

Select - A dropdown selection component built on Radix UI primitives Provides a dropdown menu for selecting a single option from a list of choices. Features comprehensive keyboard navigation, grouping capabilities, accessibility compliance, and flexible styling options. Perfect for forms, filters, and configuration interfaces. Built on Radix UI Select.Root with enhanced styling.

## JSX Usage

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

<Select
  defaultValue="value"
  value="value"
  onValueChange={handleValueChange}
  defaultOpen={true}
  open={true}
  onOpenChange={handleOpenChange}
  dir={value}
  name="value"
  disabled={true}
  required={true}
/>
```

## Component Props

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

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

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

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

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

### onOpenChange
- **Type**: `(open: boolean) => void`
- **Required**: No
- **Description**: No description available

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

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

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

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

## Examples

### Example 1
```tsx
// Basic uncontrolled select
<Select defaultValue="apple">
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="orange">Orange</SelectItem>
  </SelectContent>
</Select>
```
### Example 2
```tsx
// Controlled select with state management
const [value, setValue] = useState("");
<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Choose an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectContent>
</Select>
```
### Example 3
```tsx
// Grouped options with separators and labels
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a timezone" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>North America</SelectLabel>
      <SelectItem value="est">Eastern Time (EST)</SelectItem>
      <SelectItem value="cst">Central Time (CST)</SelectItem>
      <SelectItem value="pst">Pacific Time (PST)</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Europe</SelectLabel>
      <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
      <SelectItem value="cet">Central European Time (CET)</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>
```
### Example 4
```tsx
// Form integration with validation and required state
<form>
  <Select name="userRole" required defaultValue="">
    <SelectTrigger id="role" aria-describedby="role-error">
      <SelectValue placeholder="Choose your role" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="admin">Administrator</SelectItem>
      <SelectItem value="user">User</SelectItem>
      <SelectItem value="guest">Guest</SelectItem>
    </SelectContent>
  </Select>
</form>
```
### Example 5
```tsx
// Disabled states and interactions
<Select disabled>
  <SelectTrigger>
    <SelectValue placeholder="Disabled select" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">Option 1</SelectItem>
    <SelectItem value="2" disabled>Option 2 (disabled)</SelectItem>
  </SelectContent>
</Select>
```