1.3.0 • Published 5 months ago

@illa-design/select v1.3.0

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
5 months ago

Select

The Select component allows users pick a value from predefined options.

Installation

yarn add @illa-design/select

Import component

import { Select } from "@illa-design/select"

API

Select Basic Properties

PropsDescTypeDefault
defaultValueThe defalut valuestring | string[] | number | number[] | LabelValue | LabelValue[]-
valueThe valuestring | string[] | number | number[] | LabelValue | LabelValue[]-
modeMutiple choices mode and tags mode"multiple" | "tags"-
notFoundContentWhen there is no contentReactNode-
getPopupContainerThe container of the popup(node: HTMLElement) => Element"circle"
placeholderThe placeholder of the selectstring-
showSearchIf true, show search buttonboolean | {retainInputValue?: boolean; retainInputValueWhileSelect?: boolean }-
sizeSize of the select"small" | "medium" | "large""medium"
disabledIf true, the select is disabledboolean-
errorIf true, the select is invalidboolean-
loadingIf true, the select is loadingboolean-
allowClearIf true, show the clear buttonboolean-
maxTagCountThe max tag count of the select when on tags modenumber-
arrowIconThe arrow icon element to use in the selectReactNode | null-
removeIconThe remove icon element to use in the selectReactNode | null-

Select Events

PropsDescTypeDefault
onClickCallback when on click(e) => void-
onFocusCallback when on focus(e) => void-
onBlurCallback when on blur(e) => void-
onChangeCallback when the value change(value, option: OptionInfo | OptionInfo[]) => void-
onDeselectCallback when deselect(value: string | number | LabeledValue, option:OptionInfo) => void-
onClearCallback when clear(visible: boolean) => void-
onSearchCallback when search(value: string, reason: InputValueChangeReason) => void-
onPopupScrollCallback when scroll the popup(elem) => void-
onVisibleChangeCallback when is not visible(visible: boolean) => void-

Select-option Basic Properties

PropsDescTypeDefault
disabledIf true, the option is disabledbooleanfalse
titleThe title of the optionstring-
valueThe value of the optionstring | number-

Examples

Basic Usage

<Select value={"A"}>
  <Option>A</Option>
  <Option>B</Option>
  <Option>C</Option>
</Select>

Set the error status

<Select value={1} options={[1, 2, 3]} error />

Set the size

<Select value={1} options={[1, 2, 3]} size="large"

Set the multiple-choice mode

<Select value={[1, 2]} options={[1, 2, 3]} mode="multiple" labelInValue />

Set the max tag count

<Select value={[1, 2]} options={[1, 2, 3]} maxTagCount={1} mode="tags" />
1.2.0

5 months ago

1.3.0

5 months ago

1.0.29

10 months ago

1.0.28

10 months ago

1.0.27

11 months ago

1.0.31

9 months ago

1.0.30

10 months ago

1.1.0

8 months ago

1.0.22

1 year ago

1.0.21

1 year ago

1.0.26

12 months ago

1.0.25

12 months ago

1.0.24

1 year ago

1.0.23

1 year 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

2 years 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