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

PropTypeDefaultDescription
bgstring'#ffffff'Background color of the textarea
textColorstring'#000000'Text color of the textarea
borderColorstring'#000000'Border color of the textarea
classNamestring''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..."
/>