Search
Input

A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data

Input

When to use

A user input in a form field is needed.
A search input is required.


Fields

Text fields use a container to provide a clear affordance for interaction, making the fields discoverable in layouts.
Caption

Phone number

Phone input fields have country code, field title, input hint, text clear icon and error text. They are used only for phone number fields.
E.g. +380 (99) 433 22 11

Amount

A text field with a currency symbol text prefix and suffix.
$USD
Caption

TAN field

They are used only for TAN code fields.

Input number

They are used only when a numeric value needs to be provided. Enter a number within certain range with the mouse or keyboard.

Text area

Multiple-line text fields can hold any amount of text and in doing so grow in height ahead of the user’s entries. The text quantity can be limited to a maximum number of characters if necessary and displayed by means of a countdown.
You can put your comment here

Input Group

Input.Group example.
Note: You don't need Col to control the width in the compact mode.

Zhejiang


Option1



Option1-1
Option2-2

Between

Sign Up
Email

Home

API

Input
PropertyDescriptionTypeDefault
addonAfter
The label text displayed after (on the right side of) the input field.
string|ReactNode
addonBefore
The label text displayed before (on the left side of) the input field.
string|ReactNode
defaultValue
The initial input content
string
disabled
Whether the input is disabled.
false
id
The ID for input
string
maxLength
max length
number
prefix
The prefix icon for the Input.
string|ReactNode
size
The size of the input box. Note: in the context of a form, the large size is used.
large | middle | small
suffix
The suffix icon for the Input.
string|ReactNode
type
The type of input, see: MDN(use Input.TextArea instead of type="textarea")
string
text
value
The input content value
string
onChange
callback when user input
function(e)
onPressEnter
The callback function that is triggered when Enter key is pressed.
function(e)
allowClear
allow to remove input content with clear icon
boolean
Input.Search
PropertyDescriptionTypeDefault
enterButton
to show an enter button after input. This property conflicts with the addonAfter property.
boolean|ReactNode
false
onSearch
The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key.
function(value, event)
loading
Search box with loading.
boolean
Input.Group
PropertyDescriptionTypeDefault
compact
Whether use compact style
boolean
false
size
The size of Input.Group specifies the size of the included InputM fields. Available: large default small
string
default
Input.Password
PropertyDescriptionTypeDefault
visibilityToggle
Whether show toggle button
boolean
true
TextArea
PropertyDescriptionTypeDefault
autoSize
Height autosize feature, can be set to true|false or an object { minRows: 2, maxRows: 6 }.
boolean|object
false
defaultValue
The initial input content
string
value
The input content value
string
onPressEnter
The callback function that is triggered when Enter key is pressed.
function(e)
allowClear
allow to remove input content with clear icon
boolean
onResize
The callback function that is triggered when resize
function({ width, height })
InputMask
PropertyDescriptionTypeDefault
mask
Mask string. Default format characters are: 9: 0-9 a: A-Z, a-z *: A-Z, a-z, 0-9
string
-
maskChar
Character to cover unfilled parts of the mask
string
" "
formatChars
Defines format characters with characters as a keys and corresponding RegExp strings as a values
object
{ '9': '[0-9]', 'a': '[A-Za-z]', '*': '[A-Za-z0-9]' }
alwaysShowMask
Show mask when input is empty and has no focus.
boolean
-