Input

EInput allows users to enter and amend text or numeric values on a single line. Demo Here

Import

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

Usage

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

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

    return <EInput label="First Name" onChange={changeHandler} value={value}/>;
};

export default InputExample;

Props

For EInput component, the following props are available:

Prop	Type	Default	Note
value	String	-	The value of the input element, required for a controlled component.
label	node	-	Component's label
id	String	-	HTML id attribute.
disabled	Boolean	false	Disables the EInput.
type	String	"text"	Html input type attribute.
width	[String, Number]	-	Sets the component's width. Default unit is px.
variant	String	"fill"	The EInput element can be represented in four ways: fill and border.
message	String	-	Adds a message below the input.
square	Boolean	false	Squares the corners of the input.
className	String	-	Overrides or extends the component's styles.
name	String	-	HTML name attribute..
required	Boolean	false	Indicates that the user must specify a value for the input.
readOnly	Boolean	false	Same as readonly in native input makes the element not mutable.
size	String	"md"	The EInput element has three predefined sizes: sm, md, lg.
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.
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 input that is located after the input value. More Info here.
prependIcon	Object	-	Inserts a custom EIcon element to the input that is located before the input value. More Info here.

Callback Functions

The EInput component contains following callback functions.

Function	Description
onChange	Controls the input. function(event: React.SyntheticEvent) => void 👇 • event: The event triggers every time after a value is modified by the user.
onAppendIconClick	Fires a function when the append icon is clicked.
onPrependIconClick	Fires a function when the prepend icon is clicked.