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"
/>