Box Button ConstructorElement Counter EmailInput FormattedDate Icons Input Custom properties Basic usage All properties Logo PasswordInput Readme Tab Typography

Input

Custom properties

value

string

required

type

"text" | "email" | "password" | undefined

placeholder

string | undefined

success

boolean | undefined

error

boolean | undefined

disabled

boolean | undefined

icon

errorText

string | undefined

size

"default" | "small" | undefined

extraClass

string | undefined

onChange

(e: ChangeEvent<HTMLInputElement>) => void

required

onIconClick

((e: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined

onBlur

((e?: FocusEvent<HTMLInputElement> | undefined) => void) | undefined

onFocus

((e?: FocusEvent<HTMLInputElement> | undefined) => void) | undefined

Basic usage

placeholder

() => {
  const [value, setValue] = React.useState('value')
  const inputRef = React.useRef(null)
  const onIconClick = () => {
    setTimeout(() => inputRef.current.focus(), 0)
    alert('Icon Click Callback')
  }
  return (
    <Input
      type={'text'}
      placeholder={'placeholder'}
      onChange={e => setValue(e.target.value)}
      icon={'CurrencyIcon'}
      value={value}
      name={'name'}
      error={false}
      ref={inputRef}
      onIconClick={onIconClick}
      errorText={'Ошибка'}
      size={'default'}
      extraClass="ml-1"
    />
  )
}

() => {
  const [value, setValue] = React.useState('value')
  const inputRef = React.useRef(null)
  const onIconClick = () => {
    setTimeout(() => inputRef.current.focus(), 0)
    alert('Icon Click Callback')
  }
  return (
    <Input
      type={'text'}
      placeholder={'placeholder'}
      onChange={e => setValue(e.target.value)}
      icon={'CurrencyIcon'}
      value={value}
      name={'name'}
      error={false}
      ref={inputRef}
      onIconClick={onIconClick}
      errorText={'Ошибка'}
      size={'default'}
      extraClass="ml-1"
    />
  )
}

All properties

type

"text" | "email" | "password" | undefined

size

"default" | "small" | undefined

string | undefined

acceptCharset

string | undefined

action

string | undefined

allowFullScreen

boolean | undefined

allowTransparency

boolean | undefined

alt

string | undefined

async

boolean | undefined

autoComplete

string | undefined

autoFocus

boolean | undefined

autoPlay

boolean | undefined

capture

string | boolean | undefined

cellPadding

string | number | undefined

cellSpacing

string | number | undefined

charSet

string | undefined

challenge

string | undefined

checked

boolean | undefined

cite

string | undefined

classID

string | undefined

cols

number | undefined

colSpan

number | undefined

content

string | undefined

controls

boolean | undefined

coords

string | undefined

crossOrigin

string | undefined

data

string | undefined

dateTime

string | undefined

default

boolean | undefined

defer

boolean | undefined

disabled

boolean | undefined

download

any

encType

string | undefined

form

string | undefined

formAction

string | undefined

formEncType

string | undefined

formMethod

string | undefined

formNoValidate

boolean | undefined

formTarget

string | undefined

frameBorder

string | number | undefined

headers

string | undefined

height

string | number | undefined

high

number | undefined

href

string | undefined

hrefLang

string | undefined

htmlFor

string | undefined

httpEquiv

string | undefined

integrity

string | undefined

keyParams

string | undefined

keyType

string | undefined

kind

string | undefined

label

string | undefined

list

string | undefined

loop

boolean | undefined

low

number | undefined

manifest

string | undefined

marginHeight

number | undefined

marginWidth

number | undefined

max

string | number | undefined

maxLength

number | undefined

media

string | undefined

mediaGroup

string | undefined

method

string | undefined

min

string | number | undefined

minLength

number | undefined

multiple

boolean | undefined

muted

boolean | undefined

name

string | undefined

nonce

string | undefined

noValidate

boolean | undefined

open

boolean | undefined

optimum

number | undefined

pattern

string | undefined

placeholder

string | undefined

playsInline

boolean | undefined

poster

string | undefined

preload

string | undefined

readOnly

boolean | undefined

rel

string | undefined

required

boolean | undefined

reversed

boolean | undefined

rows

number | undefined

rowSpan

number | undefined

sandbox

string | undefined

scope

string | undefined

scoped

boolean | undefined

scrolling

string | undefined

seamless

boolean | undefined

selected

boolean | undefined

shape

string | undefined

sizes

string | undefined

span

number | undefined

src

string | undefined

srcDoc

string | undefined

srcLang

string | undefined

srcSet

string | undefined

start

number | undefined

step

string | number | undefined

summary

string | undefined

target

string | undefined

useMap

string | undefined

value

string

required

width

string | number | undefined

wmode

string | undefined

wrap

string | undefined

defaultChecked

boolean | undefined

defaultValue

string | number | readonly string[] | undefined

suppressContentEditableWarning

boolean | undefined

suppressHydrationWarning

boolean | undefined

accessKey

string | undefined

className

string | undefined

contentEditable

boolean | "true" | "false" | "inherit" | undefined

contextMenu

string | undefined

dir

string | undefined

draggable

boolean | "true" | "false" | undefined

hidden

boolean | undefined

string | undefined

lang

string | undefined

slot

string | undefined

spellCheck

boolean | "true" | "false" | undefined

style

CSSProperties | undefined

tabIndex

number | undefined

title

string | undefined

translate

"yes" | "no" | undefined

radioGroup

string | undefined

role

string | undefined

about

string | undefined

datatype

string | undefined

inlist

any

prefix

string | undefined

property

string | undefined

resource

string | undefined

typeof

string | undefined

vocab

string | undefined

autoCapitalize

string | undefined

autoCorrect

string | undefined

autoSave

string | undefined

color

string | undefined

itemProp

string | undefined

itemScope

boolean | undefined

itemType

string | undefined

itemID

string | undefined

itemRef

string | undefined

results

number | undefined

security

string | undefined

unselectable

"on" | "off" | undefined

inputMode

string | undefined

aria-activedescendant

string | undefined

aria-atomic

boolean | "true" | "false" | undefined

aria-autocomplete

"list" | "none" | "inline" | "both" | undefined

aria-busy

boolean | "true" | "false" | undefined

aria-checked

boolean | "true" | "false" | "mixed" | undefined

aria-colcount

number | undefined

aria-colindex

number | undefined

aria-colspan

number | undefined

aria-controls

string | undefined

aria-current

aria-describedby

string | undefined

aria-details

string | undefined

aria-disabled

boolean | "true" | "false" | undefined

aria-dropeffect

aria-errormessage

string | undefined

aria-expanded

boolean | "true" | "false" | undefined

aria-flowto

string | undefined

aria-grabbed

boolean | "true" | "false" | undefined

aria-haspopup

aria-hidden

boolean | "true" | "false" | undefined

aria-invalid

aria-keyshortcuts

string | undefined

aria-label

string | undefined

aria-labelledby

string | undefined

aria-level

number | undefined

aria-live

"off" | "assertive" | "polite" | undefined

aria-modal

boolean | "true" | "false" | undefined

aria-multiline

boolean | "true" | "false" | undefined

aria-multiselectable

boolean | "true" | "false" | undefined

aria-orientation

"horizontal" | "vertical" | undefined

aria-owns

string | undefined

aria-placeholder

string | undefined

aria-posinset

number | undefined

aria-pressed

boolean | "true" | "false" | "mixed" | undefined

aria-readonly

boolean | "true" | "false" | undefined

aria-relevant

aria-required

boolean | "true" | "false" | undefined

aria-roledescription

string | undefined

aria-rowcount

number | undefined

aria-rowindex

number | undefined

aria-rowspan

number | undefined

aria-selected

boolean | "true" | "false" | undefined

aria-setsize

number | undefined

aria-sort

"none" | "ascending" | "descending" | "other" | undefined

aria-valuemax

number | undefined

aria-valuemin

number | undefined

aria-valuenow

number | undefined

aria-valuetext

string | undefined

dangerouslySetInnerHTML

{ __html: string; } | undefined

onCopy

((event: ClipboardEvent<HTMLInputElement>) => void) | undefined

onCopyCapture

((event: ClipboardEvent<HTMLInputElement>) => void) | undefined

onCut

((event: ClipboardEvent<HTMLInputElement>) => void) | undefined

onCutCapture

((event: ClipboardEvent<HTMLInputElement>) => void) | undefined

onPaste

((event: ClipboardEvent<HTMLInputElement>) => void) | undefined

onPasteCapture

((event: ClipboardEvent<HTMLInputElement>) => void) | undefined

onCompositionEnd

((event: CompositionEvent<HTMLInputElement>) => void) | undefined

onCompositionEndCapture

((event: CompositionEvent<HTMLInputElement>) => void) | undefined

onCompositionStart

((event: CompositionEvent<HTMLInputElement>) => void) | undefined

onCompositionStartCapture

((event: CompositionEvent<HTMLInputElement>) => void) | undefined

onCompositionUpdate

((event: CompositionEvent<HTMLInputElement>) => void) | undefined

onCompositionUpdateCapture

((event: CompositionEvent<HTMLInputElement>) => void) | undefined

onFocus

((e?: FocusEvent<HTMLInputElement> | undefined) => void) | undefined

onFocusCapture

((event: FocusEvent<HTMLInputElement>) => void) | undefined

onBlur

((e?: FocusEvent<HTMLInputElement> | undefined) => void) | undefined

onBlurCapture

((event: FocusEvent<HTMLInputElement>) => void) | undefined

onChange

(e: ChangeEvent<HTMLInputElement>) => void

required

onChangeCapture

((event: FormEvent<HTMLInputElement>) => void) | undefined

onBeforeInput

((event: FormEvent<HTMLInputElement>) => void) | undefined

onBeforeInputCapture

((event: FormEvent<HTMLInputElement>) => void) | undefined

onInput

((event: FormEvent<HTMLInputElement>) => void) | undefined

onInputCapture

((event: FormEvent<HTMLInputElement>) => void) | undefined

onReset

((event: FormEvent<HTMLInputElement>) => void) | undefined

onResetCapture

((event: FormEvent<HTMLInputElement>) => void) | undefined

onSubmit

((event: FormEvent<HTMLInputElement>) => void) | undefined

onSubmitCapture

((event: FormEvent<HTMLInputElement>) => void) | undefined

onInvalid

((event: FormEvent<HTMLInputElement>) => void) | undefined

onInvalidCapture

((event: FormEvent<HTMLInputElement>) => void) | undefined

onLoad

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onLoadCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onError

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onErrorCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onKeyDown

((event: KeyboardEvent<HTMLInputElement>) => void) | undefined

onKeyDownCapture

((event: KeyboardEvent<HTMLInputElement>) => void) | undefined

onKeyPress

((event: KeyboardEvent<HTMLInputElement>) => void) | undefined

onKeyPressCapture

((event: KeyboardEvent<HTMLInputElement>) => void) | undefined

onKeyUp

((event: KeyboardEvent<HTMLInputElement>) => void) | undefined

onKeyUpCapture

((event: KeyboardEvent<HTMLInputElement>) => void) | undefined

onAbort

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onAbortCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onCanPlay

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onCanPlayCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onCanPlayThrough

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onCanPlayThroughCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onDurationChange

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onDurationChangeCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onEmptied

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onEmptiedCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onEncrypted

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onEncryptedCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onEnded

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onEndedCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onLoadedData

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onLoadedDataCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onLoadedMetadata

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onLoadedMetadataCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onLoadStart

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onLoadStartCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onPause

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onPauseCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onPlay

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onPlayCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onPlaying

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onPlayingCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onProgress

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onProgressCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onRateChange

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onRateChangeCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onSeeked

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onSeekedCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onSeeking

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onSeekingCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onStalled

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onStalledCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onSuspend

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onSuspendCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onTimeUpdate

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onTimeUpdateCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onVolumeChange

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onVolumeChangeCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onWaiting

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onWaitingCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onAuxClick

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onAuxClickCapture

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onClick

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onClickCapture

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onContextMenu

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onContextMenuCapture

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onDoubleClick

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onDoubleClickCapture

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onDrag

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDragCapture

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDragEnd

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDragEndCapture

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDragEnter

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDragEnterCapture

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDragExit

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDragExitCapture

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDragLeave

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDragLeaveCapture

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDragOver

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDragOverCapture

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDragStart

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDragStartCapture

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDrop

((event: DragEvent<HTMLInputElement>) => void) | undefined

onDropCapture

((event: DragEvent<HTMLInputElement>) => void) | undefined

onMouseDown

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onMouseDownCapture

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onMouseEnter

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onMouseLeave

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onMouseMove

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onMouseMoveCapture

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onMouseOut

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onMouseOutCapture

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onMouseOver

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onMouseOverCapture

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onMouseUp

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onMouseUpCapture

((event: MouseEvent<HTMLInputElement, MouseEvent>) => void) | undefined

onSelect

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onSelectCapture

((event: SyntheticEvent<HTMLInputElement, Event>) => void) | undefined

onTouchCancel

((event: TouchEvent<HTMLInputElement>) => void) | undefined

onTouchCancelCapture

((event: TouchEvent<HTMLInputElement>) => void) | undefined

onTouchEnd

((event: TouchEvent<HTMLInputElement>) => void) | undefined

onTouchEndCapture

((event: TouchEvent<HTMLInputElement>) => void) | undefined

onTouchMove

((event: TouchEvent<HTMLInputElement>) => void) | undefined

onTouchMoveCapture

((event: TouchEvent<HTMLInputElement>) => void) | undefined

onTouchStart

((event: TouchEvent<HTMLInputElement>) => void) | undefined

onTouchStartCapture

((event: TouchEvent<HTMLInputElement>) => void) | undefined

onPointerDown

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerDownCapture

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerMove

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerMoveCapture

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerUp

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerUpCapture

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerCancel

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerCancelCapture

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerEnter

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerEnterCapture

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerLeave

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerLeaveCapture

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerOver

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerOverCapture

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerOut

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onPointerOutCapture

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onGotPointerCapture

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onGotPointerCaptureCapture

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onLostPointerCapture

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onLostPointerCaptureCapture

((event: PointerEvent<HTMLInputElement>) => void) | undefined

onScroll

((event: UIEvent<HTMLInputElement, UIEvent>) => void) | undefined

onScrollCapture

((event: UIEvent<HTMLInputElement, UIEvent>) => void) | undefined

onWheel

((event: WheelEvent<HTMLInputElement>) => void) | undefined

onWheelCapture

((event: WheelEvent<HTMLInputElement>) => void) | undefined

onAnimationStart

((event: AnimationEvent<HTMLInputElement>) => void) | undefined

onAnimationStartCapture

((event: AnimationEvent<HTMLInputElement>) => void) | undefined

onAnimationEnd

((event: AnimationEvent<HTMLInputElement>) => void) | undefined

onAnimationEndCapture

((event: AnimationEvent<HTMLInputElement>) => void) | undefined

onAnimationIteration

((event: AnimationEvent<HTMLInputElement>) => void) | undefined

onAnimationIterationCapture

((event: AnimationEvent<HTMLInputElement>) => void) | undefined

onTransitionEnd

((event: TransitionEvent<HTMLInputElement>) => void) | undefined

onTransitionEndCapture

((event: TransitionEvent<HTMLInputElement>) => void) | undefined

key

string | number | null | undefined

extraClass

string | undefined

icon

onIconClick

((e: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined

success

boolean | undefined

error

boolean | undefined

errorText

string | undefined

ref

((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined

Input

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Custom properties

Basic usage

All properties

Custom properties