Input
A customizable, pixel-art styled input component with optional icon.
Basic Usage
import { Input } from 'pixel-retroui';function App() {return (<Inputplaceholder="Enter text..."onChange={(e) => console.log(e.target.value)}/>);}
Props
Prop | Type | Default | Description |
---|---|---|---|
bg | string | '#ffffff' | Background color of the input |
textColor | string | '#000000' | Text color of the input |
borderColor | string | '#000000' | Border color of the input |
icon | string | undefined | URL of the icon to display |
onChange | function | undefined | Function to call when the input value changes |
className | string | '' | Additional CSS classes to apply to the input |
Custom Input
Customize your input's appearance by selecting a preset theme or creating your own color scheme.
Theme: pop
pop
<Inputbg="#fefcd0"textColor="black"borderColor="black"placeholder="Enter text..."onChange={(e) => console.log(e.target.value)}/>
Additional Examples
With Icon
<Inputicon="/path/to/search-icon.svg"placeholder="Search..."/>
Preview:
With Custom Styling
<InputclassName=" w-1/3"bg="#d1edda"textColor="#44573c"borderColor="#44573c"placeholder="Type something..."/>
Preview: