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

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

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:

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.

2.8 KiB Raw Permalink Blame History