TextArea
A customizable, pixel-art styled textarea component for multi-line text input.
Basic Usage
import { TextArea } from 'pixel-retroui';function App() {return (<TextAreaplaceholder="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:
<TextAreabg="#fefcd0"textColor="black"borderColor="black"placeholder="Enter your text here..."/>
Additional Examples
With Custom Styling
<TextAreaclassName="w-full h-32 p-2"bg="#f0f0f0"textColor="gray"borderColor="gray"placeholder="Type something..."/>
Preview:
With Controlled Value
const [value, setValue] = useState('');<TextAreavalue={value}onChange={(e) => setValue(e.target.value)}placeholder="Type something..."/>