CODEWITHSUNDEEP
javascriptreactjsdrop-down-menuantd
Rashmi
Rashmi

Reputation: 605

Antd Select Component mode multiple, checkbox styling

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.

enter image description here

Searched a lot but unable to get any help.

Thanks in advance.

Upvotes: 7

Views: 17967

Answers (3)

Bektemir Zhanaikhanov
Bektemir Zhanaikhanov

Reputation: 41

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

Upvotes: 4

lamhungypl
lamhungypl

Reputation: 195

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

enter image description here

Upvotes: 0

Dennis Vash
Dennis Vash

Reputation: 53874

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

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

enter image description here

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>
  );
}

Edit Q-57805672-CustomDropdown

Upvotes: 8

Related Questions