Open In App

ReactJS UI Ant Design Select Component

Improve
Improve
Like Article
Like
Save
Share
Report

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/



Last Updated : 03 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads