2.1.12 • Published 9 months ago

@hautechai/webui.textarea

Licence

Apache-2.0

Version

2.1.12

Deps

Size

10 kB

Vulns

Weekly

Summary Dependency Versions

TextArea

Purpose

Multi-line text input component with resizing capabilities, icon support, and validation states.

Installation

# pnpm (recommended)
pnpm add @hautechai/webui.textarea

# npm
npm install @hautechai/webui.textarea

# yarn
yarn add @hautechai/webui.textarea

Parameters

Parameter	Type	Description
className	string	Optional CSS class name for custom styling
value	string	Optional controlled value for the textarea
placeholder	string	Optional placeholder text displayed when textarea is empty
disabled	boolean	When true, disables textarea interaction and applies disabled styling
onChange	ChangeEventHandler	Optional callback function triggered when textarea content changes
leadingIcon	React.ReactNode	Optional icon displayed at the beginning of the textarea
trailingIcon	React.ReactNode	Optional icon displayed at the end of the textarea
hasError	boolean	When true, applies error styling to indicate validation failure
variation	'filled' \| 'outlined'	Optional visual style variant (defaults to 'filled')
minRows	number	Optional minimum number of rows for the textarea (defaults to 4)
maxRows	number	Optional maximum number of rows for the textarea
actionButton	React.ReactNode	Optional action button element to display alongside or inside the textarea
actionButtonInside	boolean	When true, positions the action button inside the textarea container
actionButtonPosition	'top' \| 'middle' \| 'bottom'	Controls vertical positioning of the action button (defaults to 'middle')

Usage Example

<TextArea
    placeholder="Enter your message..."
    value={message}
    onChange={handleMessageChange}
    leadingIcon={<MessageIcon />}
    hasError={!!messageError}
    disabled={isSubmitting}
    actionButton={<Button label="Send" onClick={handleSend} />}
    actionButtonInside={false}
    actionButtonPosition="middle"
/>

// Action button positioned at top outside the textarea
<TextArea
    placeholder="Type here..."
    actionButton={<IconButton icon={<SendIcon />} onClick={handleSend} />}
    actionButtonPosition="top"
/>

// Action button positioned at bottom inside the textarea
<TextArea
    placeholder="Write a comment..."
    actionButton={<IconButton icon={<SubmitIcon />} onClick={handleSubmit} />}
    actionButtonInside={true}
    actionButtonPosition="bottom"
/>