1.3.0 • Published 2 years ago

@illa-design/input-tag v1.3.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
2 years ago

InputTag

The InputTag component is used to get users input tags in it.

Installation

yarn add @illa-design/inputTag

Import component

import { InputTag } from "@illa-design/inputTag"

API

Input Basic Properties

PropsDescTypeDefault
readOnlyIf true, the InputTag is read onlyboolean-
placeholderThe placeholder show on the input boxstring |string[]-
autoFocusIf true, the box is auto focusedboolean-
defaultValueDefault valueT[]-
disabledIf true, the input box status is disabledboolean-
errorIf true, the input box status is errorboolean-
sizeSize of the box"small" | "medium" |"large"-
valueThe value of the input boxT[]-
inputValueThe value of the input tagstring-
labelInValueSet the input and output values in { label: '', value: ''} format.boolean-
allowClearAllow the delete button to clear the valueboolean-
iconThe custom iconReactNode-
suffixSuffix of the boxReactNode-
validateCheck function(inputValue: string, values: T[]) => boolean | Promise<boolean>(inputValue, values) => inputValue && values.every((item) => item !== inputValue)

Input Events

PropsDescTypeDefault
onChangeCallback when content change(event) => void-
onPressEnterCallback when press the Enter(event) => void-
onClearCallback when click the delete button() => void-
onFocusCallback when the input box on focus(event) => void-
onBlurCallback when the input box on blur(event) => void-
onInputChangeCallback when the input tag change(event) => void-
onClickCallback when click(event) => void-
onPasteCallback when paste(event) => void-
onRemoveCallback when remove tags(event) => void-

Examples

Basic usage

<InputTag placeholder={"input-tag"} />

Set size and suffix

<InputTag placeholder="size-small" size="small" suffix="suffix" />

Set default value

<InputTag defaultValue={["default value"]} />

Set clear event

<InputTag
  placeholder="test-input-event"
  onClear={clearEvent}
  onRemove={removeEvent}
  allowClear
/>
1.2.0

2 years ago

1.3.0

2 years ago

1.0.29

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.31

2 years ago

1.0.30

2 years ago

1.1.0

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.26

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.20

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.0.10

3 years ago

0.0.11

3 years ago

0.0.12

3 years ago

0.0.13

3 years ago

0.0.14

3 years ago

0.0.15

3 years ago

0.0.9

3 years ago

0.0.16

3 years ago

0.0.17

3 years ago

0.0.8

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago