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

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

# SelectTrigger

**Type**: component

SelectTrigger - The button that opens the select dropdown A styled button that displays the current value and triggers the dropdown menu. Built on Radix UI Select.Trigger with enhanced styling including focus states, size variants, and proper hover interactions. Includes a chevron icon to indicate dropdown functionality and supports different size variants for various UI contexts. **Size Variants:** - `default`: Standard height (36px) suitable for most forms and interfaces - `sm`: Compact height (32px) ideal for dense layouts and table interfaces

## JSX Usage

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

<SelectTrigger
  asChild={true}
  size={value}
>
  {/* Your content here */}
</SelectTrigger>
```

## Component Props

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

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

## Examples

### Example 1
```tsx
// Basic trigger with custom width
<SelectTrigger className="w-[200px]">
  <SelectValue placeholder="Select an option" />
</SelectTrigger>
```
### Example 2
```tsx
// Small size variant for compact layouts
<SelectTrigger size="sm" className="w-[150px]">
  <SelectValue placeholder="Compact select" />
</SelectTrigger>
```
### Example 3
```tsx
// Form integration with accessibility attributes
<label htmlFor="user-role">User Role</label>
<SelectTrigger id="user-role" aria-describedby="role-help">
  <SelectValue placeholder="Choose role" />
</SelectTrigger>
<div id="role-help">Select the appropriate role for this user</div>
```
### Example 4
```tsx
// Custom composition using asChild
<SelectTrigger asChild>
  <button className="custom-trigger-styles">
    <SelectValue />
    <CustomChevronIcon />
  </button>
</SelectTrigger>
```