Input

A customizable, pixel-art styled input component with optional icon.

Basic Usage

import { Input } from 'pixel-retroui';
function App() {
return (
<Input
placeholder="Enter text..."
onChange={(e) => console.log(e.target.value)}
/>
);
}

Props

PropTypeDefaultDescription
bgstring'#ffffff'Background color of the input
textColorstring'#000000'Text color of the input
borderColorstring'#000000'Border color of the input
iconstringundefinedURL of the icon to display
onChangefunctionundefinedFunction to call when the input value changes
classNamestring''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
<Input
bg="#fefcd0"
textColor="black"
borderColor="black"
placeholder="Enter text..."
onChange={(e) => console.log(e.target.value)}
/>

Additional Examples

With Icon

<Input
icon="/path/to/search-icon.svg"
placeholder="Search..."
/>

Preview:

With Custom Styling

<Input
className=" w-1/3"
bg="#d1edda"
textColor="#44573c"
borderColor="#44573c"
placeholder="Type something..."
/>

Preview: