Antd select with multiselection checkboxes

Question

Im using antd's select component and I can render checkboxes inside the select options. But on selecting the checkbox, it changes as tag in the placeholder. How can I just multiselect checkboxes and do not render it as tag in the placeholder

My code is in the link https://codesandbox.io/s/confident-gauss-v7yrv?file=/src/App.js:0-807

import React from "react";
import "./styles.css";
import { Select, Checkbox } from "antd";
import "antd/dist/antd.css";
const { Option, OptGroup } = Select;
export default function App() {
  return (
    <div className="App">
      <Select placeholder="selections" style={{ width: 150 }}>
        <OptGroup label="Gender">
          <Option value="male">
            <Checkbox>Male</Checkbox>
          </Option>
          <Option value="female">
            <Checkbox>Female</Checkbox>
          </Option>
        </OptGroup>
        <OptGroup label="Status">
          <Option value="prepaid">
            <Checkbox>Single</Checkbox>
          </Option>
          <Option value="postpaid">
            <Checkbox>Married</Checkbox>
          </Option>
        </OptGroup>
      </Select>
    </div>
  );
}

xianshenglu xianshenglu · Accepted Answer · 2020-06-27T06:39:36

You can bind a value and never change that for example

<Select placeholder="selections" style={{ width: 150 }} value="">

Antd select with multiselection checkboxes

1 Answers