Search code examples
reactjsantd

How to use Buttons as Check boxes in ant design with react js

I have created a Checkbox group in ant-design with react JS. Now, I want to use Buttons, Instead of checkboxes there. One button per one value.

Here is my code. 

<Checkbox.Group>
   <ul className="ul-custom">
   {this.props.symptomsForCheckbox.map((symptom) => {
       return (
          <li>
              <Checkbox value={symptom.id}>
                  symptom.nameEnglish
              </Checkbox>
          </li>
       );
    })}
    </ul>
</Checkbox.Group>

And here it looks like

enter image description here

What I want is to add buttons, instead of checkboxes. The below image shows that.

enter image description here

And the code that I used is,

<Checkbox.Group>
   <ul className="ul-custom">
   {this.props.symptomsForCheckbox.map((symptom) => {
       return (
          <li>
              <Button value={symptom.id}>
                  symptom.nameEnglish
              </Button>
          </li>
       );
    })}
    </ul>
</Checkbox.Group>

But this doesn't work as checkboxes. Any idea for fixing this?

Thanks in advance

Solution

  • This is my creation.

    You can check only one or uncheck all.

    And I provided simple CSS that looks like Radio.Button.

    https://stackblitz.com/edit/react-bsyhkm?file=index.js

    I created new version with vertical and width option as you want.

    https://stackblitz.com/edit/react-bsyhkm-n7umzv?file=styled.js