96 lines
2.8 KiB
Markdown
96 lines
2.8 KiB
Markdown
# 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.
|