TextArea

The TextArea component provides a pixel-art styled multiline input field for capturing longer text content.
Built to match the retro aesthetic of PixelartUI, it supports labels, error states, helper text, flexible sizing, and multiple style variations.
Whether you’re collecting comments, descriptions, or notes, the TextArea ensures a consistent and nostalgic look across your interface.

Basic Example

Note


<TextArea inputName="name" label="Note" type="main" />

Text area types

Note


<TextArea
    inputName="name"
    label="Note"
    type="main"
/>
<TextArea
    inputName="name"
    label="Note"
    type="inline"
/>

Text area custom size

Note


<TextArea
    inputName="name"
    label="Note"
    type="main"
    width="400px"
    height="200px"
/>

Text area fullwidth

Note


<TextArea inputName="name" label="Note" type="main" fullwidth />

Text area placeholder

Note


<TextArea
    inputName="name"
    label="Note"
    type="main"
    placeholder="The placeholder"
/>

Text area no label


<TextArea inputName="name" label="Note" type="main" noLabel />

Text area error

Note


<TextArea inputName="name" label="Note" type="main" error />

Text area helper text

Note

help


<TextArea inputName="name" label="Note" type="main" helperText="help" />

Text area disabled

Note


<TextArea inputName="name" label="Note" type="main" disabled />

Text area custom color

Note


<TextArea inputName="name" label="Note" type="main" backgroundColor="#b13737" />

Text area styles

Note

help

Note

help


<TextArea
    inputName="name"
    label="Note"
    type="main"
    textAreaStyle="dark"
/>
<TextArea
    inputName="name"
    label="Note"
    type="inline"
    textAreaStyle="light"
/>

🔧 Props

Prop	Type	Default	Description
`inputName`	`string`	—	A unique name identifier for the TextArea input.
`placeholder`	`string`	`undefined`	Placeholder text displayed when the field is empty.
`backgroundColor`	`string`	`undefined`	Sets a custom background color for the TextArea.
`error`	`boolean`	`false`	Displays the TextArea in an error state.
`helperText`	`string`	`undefined`	Displays helper or validation text beneath the TextArea.
`disabled`	`boolean`	`false`	Disables the TextArea and visually indicates inactivity.
`label`	`string`	`undefined`	Label text displayed above the TextArea.
`noLabel`	`boolean`	`false`	Hides the label when set to `true`.
`type`	`TextAreaType`	—	Determines the TextArea’s visual style or theme.
`value`	`string`	`undefined`	The controlled value of the TextArea.
`className`	`string`	`undefined`	Adds additional CSS classes for custom styling.
`textAreaStyle`	`TextAreaStyle`	`undefined`	Applies a predefined PixelartUI style to the TextArea.
`width`	`string`	`undefined`	Sets a custom width (e.g., `"300px"`, `"100%"`).
`height`	`string`	`undefined`	Sets a custom height for the TextArea.
`fullwidth`	`boolean`	`false`	Expands the TextArea to fill the width of its container.
`onChange`	`(event: React.ChangeEvent<HTMLTextAreaElement>) => void`	`undefined`	Callback fired when the TextArea value changes.