# Introduction

The hhl-textarea component replaces the standard html with a design and a multitude of options.

# Data binding

# Auto grow.

By default the textarea is set to auto grow when you add lines.
You can disable the by adding no-grow

# Rows.

When you have disabled auto grow by no-grow.
You can adjust the amount of rows (lines) you want in the textarea, by rows="value"

# Clearable

Add input clear functionality by adding clearable

# Disabled

Disabled by adding disabled

# Readonly

Readonly by adding readonly

# Placeholder

Placeholder by adding placeholder="Type something."

# Input Click

Input Click by adding @input_click=""

# Start Icon

Start Icon by adding start-icon="iconName"

# Start Icon Click

Start Icon Click by adding @start_icon_click=""

# End Icon

Start Icon by adding end-icon="iconName"

# End Icon Click

End Icon Click by adding @end_icon_click=""

# Hint text

Hint text by adding hint=""

# Character counter

Character counter by adding counter=""

# Validation in HTML template

Validation by adding validator=""

# Validation in javascript

Validation by adding validator=""

# CSS Variables

Name	Default	Describtion
--input-font-color	Theme: --col-txt-1	The text color.
--input-font-size	14px	The text font size.
--comp-label-color	Theme	The label color.
--comp-label-font-size	Theme	The label fontSize.
--comp-border-color	Theme	The borderColor.
--comp-border-color-focus	Theme	The borderColor when focus.
--input-info-font-size	12px	The fontSize for Hint/counter/error.
--input-info-color	Theme: --comp-border-color-focus	The color for Hint/counter.
--input-error-color	Theme: --col-err	The color for error.