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

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

<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: