Using antd NPM package, select component, in multiple mode, by default checkbox shows up at right. I want to align it to left and style it like tick mark in the box followed by a label. Also, need search box separately please refer screenshot added. I wanted to know it is even possible? I don't want to use any other package.

Searched a lot but unable to get any help.

Thanks in advance.

Using antd NPM package, select component, in multiple mode, by default checkbox shows up at right. I want to align it to left and style it like tick mark in the box followed by a label. Also, need search box separately please refer screenshot added. I wanted to know it is even possible? I don't want to use any other package.

Searched a lot but unable to get any help.

Thanks in advance.

• javascript
• reactjs
• drop-down-menu
• antd

• I need to create a similar component.. Can you share the approach you used? – devb Commented Sep 9, 2021 at 9:33
• 1 Hey @devb, Are you using ANTD? I settled for existing UI of ANTD. But if you are using ANTD, you need to customize a lot. You may use custom dropdown to add search input before menu, ant.design/components/select/… and then in options add checkbox component. But it will be lots of coding. First decide whether it worth it and then go for it. – Rashmi Commented Sep 9, 2021 at 11:30
• thanks for the response...I've customised it , will try to frame an answer for anyone else looking for it... – devb Commented Sep 9, 2021 at 12:30
• @devb you got any breakthrough in above – user1057641 Commented Oct 12, 2022 at 9:35

3 Answers 3

It is possible, but it breaks the Design System of antd.

You already have a Select component which implements checking, drop-down and searching:

In your case, you need to implement and test it by yourself with the composition of antd components:

• Input.Search
• Checkbox
• Dropdown
• Menu

Minimal example:

const menu = (
  <Menu>
    <Menu.Item>
      <Checkbox>User1</Checkbox>
    </Menu.Item>
    <Menu.Item>
      <Checkbox>User2</Checkbox>
    </Menu.Item>
  </Menu>
);
export default function App() {
  return (
    <FlexBox>
      <Dropdown.Button overlay={menu}>Dropdown</Dropdown.Button>
    </FlexBox>
  );
}

Yes I agree with @lamhungypl, that you can use isSelected property. Select component has menuItemSelectedIcon property.

    menuItemSelectedIcon={({ isSelected }) => (
      <span>
        {isSelected ? 'yes': 'no'}
      </span>
    )}

    <Select
     menuItemSelectedIcon={({ isSelected }) => (
      <span>
        {isSelected ? 'yes': 'no'}
      </span>
     )}
    >
     ...
    </Select>

enter image description here

Antd Select is built on top of rc-select [1], so you can find ideas in their repo, note that some props are omitted by Antd, recheck the type definition.

Custom icon with isSelected prop will help you