Textarea

ETextarea is a multi-line input field that is commonly used in forms to collect user input such as comments or reviews. Demo Here

Import

import ETextarea from "@components/Form/ETextarea";

Usage

const TextareaExample = () => {
    const [value, setValue] = useState("");

    const changeHandler = (event) => {
        setValue(event.value.target);
    };

    return (
        <ETextarea label="our message" onChange={changeHandler} value={value}/>
    );
};

export default TextareaExample;

Props

For ETextarea component, the following props are available:

Prop	Type	Default	Note
label	node	-	Component's label
id	String	-	HTML id attribute.
type	String	"text"	Html type attribute.
rows	String	"text"	Html rows attribute.
resize	String	"text"	Html resize attribute.
disabled	Boolean	false	Disables the ETextarea.
variant	String	"fill"	The ETextarea element can be represented in four ways: fill and border.
message	String	-	Adds a message below the textarea.
square	Boolean	false	Squares the corners of the textarea.
className	String	-	Overrides or extends the component's styles.
name	String	-	HTML name attribute..
validateOn	String	"input"	Triggers validation on @values: submit, input, blur.
rules	Array	-	Validation rules. For more info refer to Form Validation.
state	String	-	Validates the user-provided data against established criteria and performs display validation. States can be none if no validation is necessary, danger if the selected is valid, or success if it is acceptable.
required	Boolean	false	Indicates that the user must specify a value for the textarea.
readOnly	Boolean	false	Same as readonly in native textarea makes the element not mutable.
placeholder	String	-	Defines a placeholder displayed in a form control when the control has no value.
color	String	"primary"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
appendIcon	Object	-	Inserts a custom EIcon element to the textarea that is located after the textarea value. More Info here.
prependIcon	Object	-	Inserts a custom EIcon element to the textarea that is located before the textarea value. More Info here.

Callback Functions

The ETextarea component contains following callback functions.

Function	Description
onChange	Controls the textarea. function(event: React.SyntheticEvent) => void 👇 • event: The event triggers every time after a value is modified by the user.