@neynar/ui/llm-docs/command-input.llm.md

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

# CommandInput

**Type**: component

CommandInput - Search input for command menu filtering Provides a search input with search icon for filtering command menu items. Automatically filters items as the user types and triggers live region announcements for screen readers. Supports both controlled and uncontrolled usage patterns. The input integrates with the Command context to provide real-time filtering, search highlighting, and result announcements. Includes built-in search icon and proper focus management.

## JSX Usage

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

<CommandInput
  value="value"
  onValueChange={handleValueChange}
  placeholder="value"
  disabled={true}
  autoFocus={true}
  className="value"
/>
```

## Component Props

### value
- **Type**: `string`
- **Required**: No
- **Description**: Controlled input value for managing search state externally

### onValueChange
- **Type**: `(search: string) => void`
- **Required**: No
- **Description**: Callback fired when input value changes

### placeholder
- **Type**: `string`
- **Required**: No
- **Description**: Placeholder text displayed when input is empty

### disabled
- **Type**: `boolean`
- **Required**: No
- **Description**: Disables the input and prevents interaction

### autoFocus
- **Type**: `boolean`
- **Required**: No
- **Description**: Auto-focus the input when rendered

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes

## Examples

### Example 1
```tsx
// Basic uncontrolled input
<Command>
  <CommandInput placeholder="Search commands..." />
  <CommandList>...</CommandList>
</Command>
```
### Example 2
```tsx
// Controlled input with external state
const [search, setSearch] = useState('');
<CommandInput
  value={search}
  onValueChange={setSearch}
  placeholder="Type a command or search..."
  autoFocus
/>
```
### Example 3
```tsx
// With disabled state
<CommandInput
  placeholder="Loading..."
  disabled={isLoading}
/>
```