Ant Design Library has this component pre-built, and it is very easy to integrate as well. Select Component is used to select a value from options. It is used to collecting user-provided information from a list of options. We can use the following approach in ReactJS to use the Ant Design Select Component.
Select Props:
- allowClear: It is used to indicate whether to Show a clear button or not.
- autoClearSearchValue: It is used to indicate whether the current search will be cleared on selecting an item or not.
- autoFocus: It is used to get focus by default.
- bordered: It is used to indicate whether it has border style or not.
- clearIcon: It is used for the custom clear icon.
- defaultActiveFirstOption: It is used to indicate whether active first option by default or not.
- defaultOpen: It is used for the Initial open state of the dropdown.
- defaultValue: It is used to denote the initially selected option.
- disabled: It is used to indicate whether disabled select or not.
- dropdownClassName: It is used to pass the className of the dropdown menu.
- dropdownMatchSelectWidth: It is used to determine whether the dropdown menu and the select input are the same widths or not.
- dropdownRender: It is used for the customized dropdown content.
- dropdownStyle: It is used to define the style of dropdown menu.
- filterOption: It is used to filter options by input if this is set to true.
- filterSort: It is the sort function for search options sorting.
- getPopupContainer: It is used to get the Parent Node to which the selector should be rendered to.
- labelInValue: It is used to indicate whether to embed label in value.
- listHeight: It is used to define the Config popup height.
- loading: It is used to indicate the loading state.
- maxTagCount: It is used to denote the Max tag count.
- maxTagPlaceholder: It is used to denote the Placeholder for not showing tags.
- maxTagTextLength: It is used to denote the Max tag text length.
- menuItemSelectedIcon: It is used for the custom menuItemSelected icon with multiple options.
- mode: It is used to set the mode of Select.
- notFoundContent: It is used to specify the content to show when no result matches.
- open: It is used for the Controlled open state of the dropdown.
- optionFilterProp: It is used to indicate which prop value of the option will be used for a filter if filterOption is set to true.
- optionLabelProp: It is used to indicate which prop value of the option will render as the content of select.
- options: It is used to denote the Select options.
- placeholder: It is used to denote the Placeholder of select.
- removeIcon: It is used to denote the custom remove icon.
- searchValue: It is used to denote the current input search text.
- showArrow: It is used to indicate whether to show the drop-down arrow or not.
- showSearch: It is used to indicate whether to show search input in a single mode or not.
- size: It is used to denote the size of Select input.
- suffixIcon: It is used for the custom suffix icon.
- tagRender: It is used to Customize tag render.
- tokenSeparators: It is the separator that is used to tokenize on the tag and multiple mode.
- value: It is used to denote the currently selected option.
- virtual: It is used to disable virtual scroll when set to false.
- onBlur: It is a called function that is triggered when the component is in a blur state.
- onChange: It is a called function that is triggered when selecting an option or input value change.
- onClear: It is a called function that is triggered when the option is clear.
- onDeselect: It is a called function that is triggered when an option is deselected, param is the selected option’s value.
- onDropdownVisibleChange: It is a called function that is triggered when dropdown open.
- onFocus: It is a called function that is triggered when the component is in focus.
- onInputKeyDown: It is a called function that is triggered when the key pressed.
- onMouseEnter: It is a called function that is triggered when the mouse enters.
- onMouseLeave: It is a called function that is triggered when the mouse leaves.
- onPopupScroll: It is a called function that is triggered when dropdown scrolls.
- onSearch: It is a called function that is triggered when input is changed.
- onSelect: It is a called function that is triggered when an option is selected.
Select Methods:
- blur(): This function is used to remove the focus.
- focus(): This function is used to get the focus.
Option Props:
- className: It is used to pass the additional class to option.
- disabled: It is used to disable this option.
- title: It is used to denote the title of Select after select this Option.
- value: It is used to denote the value for the Option.
OptGroup Props:
- key: It is used to denote the group key.
- label: It is used to denote the group label.
Creating React Application And Installing Module:
-
Step 1: Create a React application using the following command:
npx create-react-app foldername
-
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
-
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install antd
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from 'react'
import "antd/dist/antd.css";
import { Select } from 'antd';
const { Option } = Select; export default function App() {
return (
<div style={{
display: 'block', width: 700, padding: 30
}}>
<h4>ReactJS Ant-Design Select Component</h4>
<>
<Select defaultValue="Monday"
style={{ width: 100 }} >
<Option value="Monday">Monday</Option>
<Option value="Tuesday">Tuesday</Option>
<Option value="Wednesday">Wednesday</Option>
<Option value="Thursday">Thursday</Option>
<Option value="Friday">Friday</Option>
<Option value="Saturday">Saturday</Option>
<Option value="Sunday">Sunday</Option>
</Select>
</>
</div>
);
} |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://ant.design/components/select/