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

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

# Input

**Type**: component

Input - Versatile form input component for text, email, password, and other input types A flexible and accessible input component built on native HTML input elements with enhanced styling and form integration capabilities. Supports all HTML input types including text, email, password, number, file, date, and more. Features consistent design tokens, error states, focus management, and seamless integration with form libraries like React Hook Form.

## JSX Usage

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

<Input
  type={value}
  placeholder="value"
  value={value}
  defaultValue={value}
  disabled={true}
  required={true}
  readOnly={true}
  id="value"
  name="value"
  autoComplete="value"
  autoFocus={true}
  maxLength={0}
  minLength={0}
  pattern="value"
  min={value}
  max={value}
  step={value}
  onChange={handleChange}
  onFocus={handleFocus}
  onBlur={handleBlur}
  onKeyDown={handleKeyDown}
  onKeyUp={handleKeyUp}
  "aria-invalid"={value}
  "aria-describedby"="value"
  "aria-labelledby"="value"
  "aria-label"="value"
  "aria-required"={value}
  className="value"
/>
```

## Component Props

### type
- **Type**: `React.HTMLInputTypeAttribute`
- **Required**: No
- **Description**: No description available

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

### value
- **Type**: `string | ReadonlyArray<string> | number`
- **Required**: No
- **Description**: No description available

### defaultValue
- **Type**: `string | ReadonlyArray<string> | number`
- **Required**: No
- **Description**: No description available

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

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

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

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

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

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

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

### maxLength
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### minLength
- **Type**: `number`
- **Required**: No
- **Description**: No description available

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

### min
- **Type**: `string | number`
- **Required**: No
- **Description**: No description available

### max
- **Type**: `string | number`
- **Required**: No
- **Description**: No description available

### step
- **Type**: `string | number`
- **Required**: No
- **Description**: No description available

### onChange
- **Type**: `(event: React.ChangeEvent<HTMLInputElement>) => void`
- **Required**: No
- **Description**: No description available

### onFocus
- **Type**: `(event: React.FocusEvent<HTMLInputElement>) => void`
- **Required**: No
- **Description**: No description available

### onBlur
- **Type**: `(event: React.FocusEvent<HTMLInputElement>) => void`
- **Required**: No
- **Description**: No description available

### onKeyDown
- **Type**: `(event: React.KeyboardEvent<HTMLInputElement>) => void`
- **Required**: No
- **Description**: No description available

### onKeyUp
- **Type**: `(event: React.KeyboardEvent<HTMLInputElement>) => void`
- **Required**: No
- **Description**: No description available

### "aria-invalid"
- **Type**: `boolean | "false" | "true" | "grammar" | "spelling"`
- **Required**: No
- **Description**: No description available

### "aria-describedby"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-labelledby"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-label"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-required"
- **Type**: `boolean | "false" | "true"`
- **Required**: No
- **Description**: No description available

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

## Examples

### Example 1
```tsx
// Basic text input
<Input type="text" placeholder="Enter your name" />
```
### Example 2
```tsx
// Email input with validation
<Input
  type="email"
  placeholder="your
### Example 3
```tsx
// Password input with toggle visibility
<div className="relative">
  <Input
    type="password"
    placeholder="Enter password"
    autoComplete="current-password"
  />
  <Button
    type="button"
    variant="ghost"
    size="sm"
    className="absolute right-0 top-0 h-full px-3"
  >
    <Eye className="h-4 w-4" />
  </Button>
</div>
```
### Example 4
```tsx
// Number input with min/max constraints
<Input
  type="number"
  placeholder="Age"
  min={0}
  max={120}
  step={1}
/>
```
### Example 5
```tsx
// File input with proper labeling
<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="picture">Profile Picture</Label>
  <Input
    id="picture"
    type="file"
    accept="image/*"
    aria-describedby="file-help"
  />
  <p id="file-help" className="text-sm text-muted-foreground">
    Upload a PNG, JPG or GIF (max 5MB)
  </p>
</div>
```
### Example 6
```tsx
// Search input with icon
<div className="relative">
  <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 transform text-muted-foreground" />
  <Input
    type="search"
    placeholder="Search..."
    className="pl-8"
  />
</div>
```
### Example 7
```tsx
// Input with error state
<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input
    id="email"
    type="email"
    aria-invalid={true}
    aria-describedby="email-error"
  />
  <p id="email-error" className="text-sm text-destructive">
    Please enter a valid email address
  </p>
</div>
```
### Example 8
```tsx
// Form integration with React Hook Form
const { register, formState: { errors } } = useForm();
<div className="space-y-2">
  <Label htmlFor="username">Username</Label>
  <Input
    id="username"
    {...register("username", { required: "Username is required" })}
    aria-invalid={!!errors.username}
    aria-describedby={errors.username ? "username-error" : undefined}
  />
  {errors.username && (
    <p id="username-error" className="text-sm text-destructive">
      {errors.username.message}
    </p>
  )}
</div>
```
### Example 9
```tsx
// Input with button (subscription form)
<div className="flex w-full max-w-sm items-center space-x-2">
  <Input
    type="email"
    placeholder="Enter your email"
    aria-label="Email for newsletter"
  />
  <Button type="submit">Subscribe</Button>
</div>
```
### Example 10
```tsx
// Disabled input with explanation
<div className="space-y-2">
  <Label htmlFor="readonly-field">System Generated ID</Label>
  <Input
    id="readonly-field"
    value="SYS-12345"
    disabled
    aria-describedby="readonly-help"
  />
  <p id="readonly-help" className="text-sm text-muted-foreground">
    This value is automatically generated and cannot be edited
  </p>
</div>
```