Module: Input

A multi type input component that supports standard text, email, tel.

Parameters:

Name Type Description

props

object

Component props.

Properties

Name	Type	Description
`borderStyle`	string	The border style, one of `default`, `error`, or `correct`.
`clearable`	boolean	If input is clearable.
`clearableButtonAttributes`	object	Custom attributes for the clearable button.
`controlled`	boolean	Whether the input is controlled or not.
`customAttributes`	object	Custom attributes for the component.
`customClasses`	string \| Array \| object	Custom classes for the component.
`directControlled`	boolean	Whether the input is directly controlled or not. If true, the value prop is used.
`disabled`	boolean	If input is disabled.
`helpTextAttributes`	object	Custom attribute for the help text.
`helpTextPosition`	string	The position of the help text.
`iconAttributes`	string	Custom attributes for the icon.
`id`	string	Optional id. Auto generated if not passed.
`labelAttributes`	object	Any custom attributes for the label.
`max`	string	The maximum value to accept for the input if type is number.
`min`	string	The minimum value to accept for the input if type is number.
`name`	string	The name attribute for the input.
`onBlur`	function	On blur function handler.
`onChange`	function	On change function handler.
`onClear`	function	On clear function handler. When clearable true, this function is called when it occurs.
`onKeyDown`	function	On key down function handler.
`onFocus`	function	On focus function handler.
`placeholder`	string	The optional placeholder attribute for the input.
`required`	boolean	Whether the field is required or not.
`requiredLabel`	object	Required label properties.
`size`	string	The input size: regular (`size-r`), large (`size-l`), or extra large (`size-xl`).
`spacing`	string \| number \| Array \| object	The spacing for the component, as a string, number, array, or object.
`step`	string	The step value to accept for the input if type is number.
`textSecurity`	string	The text security of the input, one of `circle`, `disc`, `square`, or `none`.
`theme`	string	The theme of the input.
`type`	string	The input type.
`value`	string	The input value.
`width`	string	The width of the input. Can be "full" or "auto".
`wrapperAttributes`	object	Custom attributes for the wrapper element.
`wrapperClasses`	string \| Array \| object	Custom classes for the wrapper element.
`wrapperTagName`	object	Tag to use for the input wrapper. Defaults to `div`.

ref

object | null

Ref to the component.

Since: 1.1.15
Source: elements/Input/index.js, line 11

Returns:

The input component.

Type:: JSX.Element

Example

import Input from '@gravityforms/components/react/admin/elements/Input';

return (
    <Input
        onChange={ () => {} }
        placeholder="I am a placeholder"
    />
);