Input

Install

import {Input, InputPassword} from '@xsolla/uikit';

Examples

Standard input
Default appearance and behavior. Used in most cases.
With error
Error message
With 'highlight' validationAppearance
Small input
Usually used for filters. Width is fixed at 164px.
With icon
With custom icon
Borderless
With custom trigger
Password field
Shows/hides input value
Readonly (button appearance)
Used for 'select' fields. Not applicable for keyboard input.
Custom —Āomponent
Allows to use any custom component instead of default <input>, e.g. 'react-debounce-input'

Usage

<Input
  name="basic-input"
  input={{
    value: null,
    onChange: this.onChange
  }}
/>
import {Field} from 'refux-form';
<Field component={Input} name="redux-input" />;

API

PropertyDescriptionTypeDefault
ascustom component for inputstring or React.ComponentType<{}>input
inputconfig for redux-form or basic inputobject{}
metameta for redux-form or basic inputobject{touched: false, error: null}
nameinput namestringnull
typecan be set to text, email, password, number, filestringtext
sizecan be set to xs, sm, mdstringmd
offsetcan be set to left, left-separated, right, bothstringfalse
disabledset the disabled state of inputbooleanfalse
disabledLimitationMinWidthdisable input min width limitationbooleanfalse
inlineinline input renderbooleanfalse
focusedset focus to inputbooleanfalse
readOnlyset button appearance (clickable, usually with click handler)booleanfalse
onClickcallback function that is fired on Input onClick eventevent => void 0
iconicon for inputstringnull
defaultValueset the default value of inputstringnull
placeholderset the placeholder of inputstringnull
classNameset the className of inputstringnull
customIconcustom icon for inputstringnull
validationAppearancecan be set to default, highlightstringnull
dataIdErrorAttribute for data identifierstringnull
notificationClassNameset the className of input notificationstringnull