TextArea

A customizable, pixel-art styled textarea component for multi-line text input.

Basic Usage

import { TextArea } from 'pixel-retroui';

function App() {
  return (
    <TextArea 
      placeholder="Enter your text here..." 
      onChange={(e) => console.log(e.target.value)}
    />
  );
}

Props

Prop	Type	Default	Description
bg	string	'#ffffff'	Background color of the textarea
textColor	string	'#000000'	Text color of the textarea
borderColor	string	'#000000'	Border color of the textarea
className	string	''	Additional CSS classes to apply to the textarea

Custom TextArea

Customize your textarea's appearance by selecting a preset theme or creating your own color scheme.

Theme:

<TextArea
  bg="#fefcd0"
  textColor="black"
  borderColor="black"
  placeholder="Enter your text here..."
/>

Additional Examples

With Custom Styling

<TextArea 
  className="w-full h-32 p-2"
  bg="#f0f0f0"
  textColor="gray"
  borderColor="gray"
  placeholder="Type something..."
/>

Preview:

With Controlled Value

const [value, setValue] = useState('');

<TextArea 
  value={value}
  onChange={(e) => setValue(e.target.value)}
  placeholder="Type something..."
/>