# Input Component Documentation

## Overview

The Input component represents a fundamental UI element within the toolkit, supporting multiple visual presentations, dimensions, and operational states.

## Props Configuration

### InputRoot Properties

| Property | Type | Default | Purpose |
|----------|------|---------|---------|
| `size` | `'sm' \| 'base' \| 'lg'` | `'base'` | Adjusts input dimensions |
| `state` | `'default' \| 'error'` | `'default'` | Visual feedback styling |
| `side` | `'left' \| 'center' \| 'right'` | — | Text positioning and cursor placement |
| `inputClassName` | `string` | — | Custom classes for inner input element |
| Standard input attributes | `ComponentProps<'input'>` | — | Native HTML input properties |

### InputSlot Properties

| Property | Type | Default | Purpose |
|----------|------|---------|---------|
| `side` | `'left' \| 'right'` | `'left'` | Slot positioning |
| Standard div attributes | `ComponentProps<'div'>` | — | Native HTML div properties |

## Type Definitions

```typescript
interface InputRootProps extends ComponentProps<"div">, VariantProps<typeof inputVariants> {
  state?: "default" | "error";
  side?: "left" | "right" | "center";
  asChild?: boolean;
  inputClassName?: string;
  size?: "sm" | "base" | "lg";
}

interface InputSlotProps extends ComponentProps<"div"> {
  side?: "left" | "right";
}
```

## Text Alignment Options

The component accommodates three alignment directions: left (default), center, and right. Slot components enable prefixes and suffixes through positioned elements.

## State Management

**Default State**: Standard appearance for typical interactions

**Error State**: Visual indication for validation failures and user feedback

**Disabled State**: Prevents user interaction and modification

## Input Type Examples

- **Text Input**: Standard character input
- **Number Input**: Numeric values with optional currency symbols
- **Password Input**: Masked character display
- **Email Input**: Email-specific validation
- **Search Input**: Search functionality with supplementary icons

## Interactive Examples

### Character Counter Implementation

```javascript
const [value, setValue] = useState('');
const [count, setCount] = useState(0);

return (
  <InputRoot
    size="sm"
    placeholder="Type something..."
    value={value}
    onChange={(e) => {
      setValue(e.target.value);
      setCount(e.target.value.length);
    }}
  />
);
```

### Calculation Feature

Combines price and quantity inputs for real-time total computation:

```javascript
const [price, setPrice] = useState('');
const [quantity, setQuantity] = useState('');
const total = (parseFloat(price) || 0) * (parseInt(quantity) || 0);
```

### Form Validation Pattern

Implements error detection and submission handling through state management and conditional styling based on validation results.