Input

`Input.Props`

Attribute	Description	Type	Accepted values	Default
value	input value	`string`	-	-
initialValue	initial value	`string`	-	-
placeholder	placeholder	`string`	-	-
size	input size	`NormalSizes`	InputSizes	`medium`
status	current status	`NormalTypes`	InputStatus	`default`
readOnly	native attr	`boolean`	-	`false`
disabled	disable input	`boolean`	-	`false`
clearable	show clear icon	`boolean`	-	`false`
label	text label for input	`string`	-	-
labelRight	text label at right for input	`string`	-	-
icon	icon for input	`React.ReactNode`	-	-
iconRight	icon at right for input	`React.ReactNode`	-	-
iconClickable	icons are clickable	`boolean`	-	`false`
onIconClick	click icon event	`(e: React.ChangeEvent) => void`	-	-
onChange	change event	`(e: React.ChangeEvent) => void`	-	-
onClearClick	clear icon event	`(e: React.MouseEvent) => void`	-	-
ref	forwardRef	`Ref<HTMLInputElement \| null>`	-	-
...	native props	`InputHTMLAttributes`	`'alt', 'type', 'className', ...`	-

`Input.Password.Props`

Attribute	Description	Type	Accepted values	Default
hideToggle	hide toggle icon	`boolean`	-	`false`
...	input props	`Input.Props`	Input.Props	-

`InputSizes`

type InputSizes = 'mini' | 'small' | 'medium' | 'large'

`InputStatus`

type InputStatus = 'default' | 'secondary' | 'success' | 'warning' | 'error'

`useInput`

type useInput = (
  initialValue: string,
) => {
  state: string
  setState: Dispatch<SetStateAction<string>>
  currentRef: MutableRefObject<string>
  reset: () => void
  bindings: {
    value: string
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
  }
}

Default

Sizes

Set width

unwritable

inline label

block label

status

Icon

Clearable

Password

Get Change

With `useInput`

Imperative API

APIs

`Input.Props`

`Input.Password.Props`

`InputSizes`

`InputStatus`

`useInput`