1.3.0 • Published 4 months ago
@illa-design/input-tag v1.3.0
InputTag
The InputTag component is used to get users input tags in it.
Installation
yarn add @illa-design/inputTagImport component
import { InputTag } from "@illa-design/inputTag"API
Input Basic Properties
| Props | Desc | Type | Default |
|---|---|---|---|
| readOnly | If true, the InputTag is read only | boolean | - |
| placeholder | The placeholder show on the input box | string |string[] | - |
| autoFocus | If true, the box is auto focused | boolean | - |
| defaultValue | Default value | T[] | - |
| disabled | If true, the input box status is disabled | boolean | - |
| error | If true, the input box status is error | boolean | - |
| size | Size of the box | "small" | "medium" |"large" | - |
| value | The value of the input box | T[] | - |
| inputValue | The value of the input tag | string | - |
| labelInValue | Set the input and output values in { label: '', value: ''} format. | boolean | - |
| allowClear | Allow the delete button to clear the value | boolean | - |
| icon | The custom icon | ReactNode | - |
| suffix | Suffix of the box | ReactNode | - |
| validate | Check function | (inputValue: string, values: T[]) => boolean | Promise<boolean> | (inputValue, values) => inputValue && values.every((item) => item !== inputValue) |
Input Events
| Props | Desc | Type | Default |
|---|---|---|---|
| onChange | Callback when content change | (event) => void | - |
| onPressEnter | Callback when press the Enter | (event) => void | - |
| onClear | Callback when click the delete button | () => void | - |
| onFocus | Callback when the input box on focus | (event) => void | - |
| onBlur | Callback when the input box on blur | (event) => void | - |
| onInputChange | Callback when the input tag change | (event) => void | - |
| onClick | Callback when click | (event) => void | - |
| onPaste | Callback when paste | (event) => void | - |
| onRemove | Callback 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
4 months ago
1.3.0
4 months ago
1.0.29
10 months ago
1.0.28
10 months ago
1.0.27
10 months ago
1.0.31
9 months ago
1.0.30
10 months ago
1.1.0
8 months ago
1.0.22
12 months ago
1.0.21
12 months ago
1.0.26
11 months ago
1.0.25
11 months ago
1.0.24
12 months ago
1.0.23
12 months ago
1.0.19
1 year ago
1.0.18
1 year ago
1.0.17
1 year ago
1.0.20
1 year ago
1.0.16
1 year ago
1.0.15
1 year ago
1.0.14
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.11
1 year ago
1.0.10
1 year ago
1.0.13
1 year ago
1.0.12
1 year ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.0.10
2 years ago
0.0.11
2 years ago
0.0.12
2 years ago
0.0.13
2 years ago
0.0.14
2 years ago
0.0.15
2 years ago
0.0.9
2 years ago
0.0.16
2 years ago
0.0.17
2 years ago
0.0.8
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago