Select
Select allows users to make a single selection or multiple selections from a list of options.
Single select
Allows the user to select a single item from a dropdown list of options.
Select...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import React from 'react';
import SelectBox from '@neoKit/selectBox';
const DefaultExample = () => {
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" }
];
const customStyles = {
control: (provided, state) => ({
...provided,
background: "#fff",
borderColor: "#9e9e9e",
minHeight: "40px",
height: "40px",
boxShadow: state.isFocused ? null : null
}),
valueContainer: (provided, state) => ({
...provided,
height: "40px",
padding: "0 6px"
}),
input: (provided, state) => ({
...provided,
margin: "0px"
}),
indicatorSeparator: (state) => ({
display: "none"
}),
indicatorsContainer: (provided, state) => ({
...provided,
height: "40px"
})
};
return (
<SelectBox options={options} styles={customStyles}></SelectBox>
);
};
export default DefaultExample;
Disabled
Allows the user to disable the selectbox
Select...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import SelectBox from '@neoKit/selectBox';
const DisabledSelectExample = () => {
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" }
];
return (
<SelectBox options={options} styles={customStyles} isDisabled></SelectBox>
);
};
export default DisabledSelect;
Clearable
Allows the user to clear the selectbox
Select...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import SelectBox from '@neoKit/selectBox';
const DisabledSelectExample = () => {
const options = [
{ value: "chocolate", label: "Chocolate" },
{ value: "strawberry", label: "Strawberry" },
{ value: "vanilla", label: "Vanilla" }
];
return (
<SelectBox options={options} styles={customStyles} isDisabled></SelectBox>
);
};
export default DisabledSelect;
Searchable
Allows the user to search the selectbox
Select...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from 'react';
import SelectBox from '@neoKit/selectBox';
const SearchableSelectExample = () => {
const colorOptions = [
{ value: "red", label: "Red" },
{ value: "yellow", label: "Yellow" },
{ value: "green", label: "Green" },
{ value: "blue", label: "Blue" },
{ value: "cyan", label: "Cyan" },
{ value: "pink", label: "Pink" }
];
return (
<SelectBox
isMulti
name='colors'
options={colorOptions}
isSearchable={true}
className='basic-multi-select'
classNamePrefix='select'></SelectBox>
);
};
export default SearchableSelectExample;
Right to left
Change selectbox view right to left
Select...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React from 'react';
import SelectBox from '@neoKit/selectBox';
const RightToLeftSelectExample = () => {
const colorOptions = [
{ value: "red", label: "Red" },
{ value: "yellow", label: "Yellow" },
{ value: "green", label: "Green" },
{ value: "blue", label: "Blue" },
{ value: "cyan", label: "Cyan" },
{ value: "pink", label: "Pink" }
];
return (
<SelectBox
isMulti
name='colors'
options={colorOptions}
isSearchable={true}
isRtl={true}
className='basic-multi-select'
classNamePrefix='select'></SelectBox>
);
};
export default RightToLeftSelectExample;
Multi select
Allows the user to select multiple items from a dropdown list of options.
Select...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';
import SelectBox from '@neoKit/selectBox';
const MultiSelectExample = () => {
const colorOptions = [
{ value: "red", label: "Red" },
{ value: "yellow", label: "Yellow" },
{ value: "green", label: "Green" },
{ value: "blue", label: "Blue" },
{ value: "cyan", label: "Cyan" },
{ value: "pink", label: "Pink" }
];
return (
<SelectBox isMulti
name='colors'
options={colorOptions}
className='basic-multi-select'
classNamePrefix='select'></SelectBox>
);
};
export default MultiSelectExample;
Custom Selected
Allows the user to select multiple items default when loading data.
Green
Blue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react';
import SelectBox from '@neoKit/selectBox';
const CustomMulitiSelectExample = () => {
const colorOptions = [
{ value: "red", label: "Red" },
{ value: "yellow", label: "Yellow" },
{ value: "green", label: "Green" },
{ value: "blue", label: "Blue" },
{ value: "cyan", label: "Cyan" },
{ value: "pink", label: "Pink" }
];
return (
<SelectBox isMulti
name='colors'
options={colorOptions}
className='basic-multi-select'
defaultValue={[colorOptions[2], colorOptions[3]]}
classNamePrefix='select'></SelectBox>
);
};
export default CustomMulitiSelectExample;