Recessed fields with strict state management. The halo is reserved exclusively for the focused (active) state.
Hover over the inputs above to see border color changes
Click an input to see the focus halo and lift animation
Physics: Inputs use concave shadows (inset shadows) creating a recessed feel. The border changes instantly on interaction, while the focus halo (outer glow) appears with a subtle lift (-1px). This choreographed timing emphasizes the "pressed into surface" metaphor.
| Prop | Type | Default | Description |
|---|---|---|---|
status | 'default' | 'success' | 'error' | 'pending' | 'default' | Validation/interaction status |
leftIcon | ReactNode | - | Icon or element on left side |
rightIcon | ReactNode | - | Icon or element on right side |
clearable | boolean | false | Show clear button when input has value |
onClear | () => void | - | Callback when clear button is clicked |
copyable | boolean | false | Show copy button to copy input value |
onCopy | (value: string) => void | - | Callback after successful copy |
showCounter | boolean | false | Show character counter (requires maxLength) |
renderCounter | (current, max) => ReactNode | - | Custom counter renderer |
iconAlign | 'top' | 'center' | 'center' | Vertical alignment of icons |
label | string | - | Label text for the input |