{"meta":"<h2 id=\"Development Guide\">Development Guide <a class=\"header-anchor scroll-count-item\" href=\"#Development Guide\" data-scroll-id=\"Development Guide\">#</a></h2>\n<h3 id=\"When To Use\">When to Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>Form Input, use it with Form components usually.</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Input\">Input <a class=\"header-anchor scroll-count-item\" href=\"#Input\" data-scroll-id=\"Input\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n<th>Supported Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Current value (controlled)</td>\n<td>string | number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>Default value (uncontrolled)</td>\n<td>string | number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when value changed</td>\n<td>(<br> value: string | number,<br> e:<br> | React.ChangeEvent&lt;HTMLInputElement&gt;<br> | React.CompositionEvent&lt;HTMLInputElement&gt;<br> | React.KeyboardEvent&lt;HTMLInputElement&gt;,<br> reason?: string<br> ) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onKeyDown</td>\n<td>Callback when key down</td>\n<td>(<br> e: React.KeyboardEvent&lt;HTMLInputElement&gt;,<br> opts: OnKeyDownOpts<br> ) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disabled of Input</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxLength</td>\n<td>Max length</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasLimitHint</td>\n<td>Show limit hint</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>showLimitHint</td>\n<td>Show limit hint</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>cutString</td>\n<td>Cut string when maxLength is exceeded</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>readOnly</td>\n<td>Read only</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>trim</td>\n<td>OnChange return will automatically remove head and tail empty characters</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Placeholder</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onFocus</td>\n<td>Callback when focus</td>\n<td>(e: React.FocusEvent&lt;HTMLInputElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onBlur</td>\n<td>Callback when blur</td>\n<td>(e: React.FocusEvent&lt;HTMLInputElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>getValueLength</td>\n<td>Custom calculation method of string length</td>\n<td>(value: string) =&gt; number | void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>className</td>\n<td>Custom className</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>style</td>\n<td>Custom inline style</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>htmlType</td>\n<td>Native type</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>Name</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>state</td>\n<td>State</td>\n<td>&apos;error&apos; | &apos;loading&apos; | &apos;success&apos; | &apos;warning&apos;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>Label</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasClear</td>\n<td>Show clear button</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasBorder</td>\n<td>Show border</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>size</td>\n<td>Size</td>\n<td>&apos;small&apos; | &apos;medium&apos; | &apos;large&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onPressEnter</td>\n<td>Callback when press enter</td>\n<td>(e: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hint</td>\n<td>Hint (Icon type, occupy the same place as clear button)</td>\n<td>string | React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>innerBefore</td>\n<td>Content before text</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>innerAfter</td>\n<td>Content after text</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>addonBefore</td>\n<td>Addon Content before input</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>addonAfter</td>\n<td>Addon Content after input</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>addonTextBefore</td>\n<td>Addon Text before input</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>addonTextAfter</td>\n<td>Addon Text after input</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoComplete</td>\n<td>Auto complete</td>\n<td>string</td>\n<td>&apos;off&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoFocus</td>\n<td>Auto focus</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Is preview</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Custom preview content</td>\n<td>(value: string | number | undefined, props: InputProps) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>composition</td>\n<td>Will filter the input method middle letter status, and only trigger onChange after the text input is completed</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>1.23</td>\n</tr>\n<tr>\n<td>hoverShowClear</td>\n<td>Hover to show clear</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>1.24</td>\n</tr>\n<tr>\n<td>extra</td>\n<td>Extra content</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>htmlSize</td>\n<td>Native input size</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>inputRender</td>\n<td>Custom input style</td>\n<td>(input: React.ReactElement) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>inputStyle</td>\n<td>Custom input style</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>inputClassName</td>\n<td>Custom input className</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>innerBeforeClassName</td>\n<td>Content className before text</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>innerAfterClassName</td>\n<td>Content className after text</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Input Text Area\">Input.TextArea <a class=\"header-anchor scroll-count-item\" href=\"#Input Text Area\" data-scroll-id=\"Input Text Area\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n<th>Supported Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Current value (controlled)</td>\n<td>string | number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>Default value (uncontrolled)</td>\n<td>string | number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when value changed</td>\n<td>(value: string, e: React.ChangeEvent&lt;HTMLTextAreaElement&gt;, type?: string) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onKeyDown</td>\n<td>Callback when key down</td>\n<td>(<br> e: React.KeyboardEvent&lt;HTMLTextAreaElement&gt;,<br> opts: OnKeyDownOpts<br> ) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disabled of Input</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxLength</td>\n<td>Max length</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasLimitHint</td>\n<td>Show limit hint</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>showLimitHint</td>\n<td>Show limit hint</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>cutString</td>\n<td>Cut string when maxLength is exceeded</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>readOnly</td>\n<td>Read only</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>trim</td>\n<td>OnChange return will automatically remove head and tail empty characters</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Placeholder</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onFocus</td>\n<td>Callback when focus</td>\n<td>(e: React.FocusEvent&lt;HTMLTextAreaElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onBlur</td>\n<td>Callback when blur</td>\n<td>(e: React.FocusEvent&lt;HTMLTextAreaElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>getValueLength</td>\n<td>Custom calculation method of string length</td>\n<td>(value: string) =&gt; number | void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>className</td>\n<td>Custom className</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>style</td>\n<td>Custom inline style</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>htmlType</td>\n<td>Native type</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>Name</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>state</td>\n<td>State</td>\n<td>&apos;error&apos; | &apos;warning&apos; | &apos;loading&apos;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasBorder</td>\n<td>Show border</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoHeight</td>\n<td>Auto height</td>\n<td>boolean | { minRows?: number | string; maxRows?: number | string }</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>rows</td>\n<td>Height of multi</td>\n<td>number</td>\n<td>4</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Is preview</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Custom preview content</td>\n<td>(value: string | number | undefined, props: TextAreaProps) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>composition</td>\n<td>Will filter the input method middle letter status, and only trigger onChange after the text input is completed</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>1.23</td>\n</tr>\n<tr>\n<td>hasClear</td>\n<td>Show clear button</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>size</td>\n<td>Size</td>\n<td>&apos;small&apos; | &apos;medium&apos; | &apos;large&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Input Group\">Input.Group <a class=\"header-anchor scroll-count-item\" href=\"#Input Group\" data-scroll-id=\"Input Group\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>addonBefore</td>\n<td>Addon Content before input</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>addonBeforeClassName</td>\n<td>Addon Content className before input</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>addonAfter</td>\n<td>Addon Content after input</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>addonAfterClassName</td>\n<td>Addon Content className after input</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>rtl</td>\n<td>Rtl</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disabled</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Input Password\">Input.Password <a class=\"header-anchor scroll-count-item\" href=\"#Input Password\" data-scroll-id=\"Input Password\">#</a></h3>\n<p>Inherit Input&apos;s properties</p>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>showToggle</td>\n<td>Show toggle button</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"On Key Down Opts\">OnKeyDownOpts <a class=\"header-anchor scroll-count-item\" href=\"#On Key Down Opts\" data-scroll-id=\"On Key Down Opts\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>beTrimed</td>\n<td>Input space is cleared</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>overMaxLength</td>\n<td>Exceeded maximum length</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"Input Text Area Inner Methods Got By Refs\">Input/TextArea Inner Methods(Got by refs) <a class=\"header-anchor scroll-count-item\" href=\"#Input Text Area Inner Methods Got By Refs\" data-scroll-id=\"Input Text Area Inner Methods Got By Refs\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Descripiton</th>\n<th>Type</th>\n<th>Default Value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>getInputNode</td>\n<td>get truely input html dom node</td>\n<td>Function</td>\n<td></td>\n</tr>\n<tr>\n<td>focus</td>\n<td>get foucs<br><br><strong>signature</strong>:<br> Function(start:Number, end: Number)<br><strong>params</strong>:<br><em>start</em>: {Number} cursor postion<br><em>end</em>: {Number} select end postion</td>\n<td>Function</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"ARIA And Key Board\">ARIA and KeyBoard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Key Board\" data-scroll-id=\"ARIA And Key Board\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">KeyBoard</th>\n<th style=\"text-align:left\">Descripiton</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">Enter</td>\n<td style=\"text-align:left\">Trigger the onKeyDown event</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Any</td>\n<td style=\"text-align:left\">Trigger the onChange event</td>\n</tr>\n</tbody>\n</table>\n"}