Semantic-ui-react: Are dropdowns with checkboxes possible?

[panpingo]

Something like this (first result from google):

https://codepen.io/elmahdim/pen/hlmri

That is, I'm looking for kinda the opposite of https://react.semantic-ui.com/modules/dropdown#dropdown-example-multiple-selection

So the items would be checked but the display text shown when collapsed would never change.

Is this possible with the existing library?

[levithomason]

Active items are automatically removed from the Dropdown menu. So you cannot show a "checked" state for an item in the menu.

You could create a similar component out of an Input as a trigger for a Popup containing a Menu or List of Checkboxes.

[hugomn]

@levithomason Isn't it an option to have this in Semantic-UI-React? We could have an option that we could keep the items when selected and display the checkbox. I can make a PR for this feature. Let me know if there is any other place to track new features like this.

[piyushkathayat]

Hi, @hugomn @panpingo did you guys manage to get react-semantic dropdowns with checkboxes ? any solution for that ?

[hugomn]

HI @piyushkathayat! I have a local version of SUIR dropdown working with checkbox and multi-levels. I was planning to push it to our SUIR fork, but I'm not sure if that will be merged, because it's not on the official SUI specs and they are now planning SUIR v2.0 that will be totally independent of CSS frameworks. I'm waiting for @levithomason advice here to understand the best way to proceed.

[piyushkathayat]

@hugomn looks cool. nice work. Thanks. lets wait for @levithomason comments.

[xumix]

any news on this?

[TimJulius]

Any news on this?

[hugomn]

It seems like dropdowns with multiple selection won't be part of Semantic-ui specs. 🤷🏻‍♂️

[FadyQJ]

Well that's too bad :(

[clearly]

It seems like dropdowns with multiple selection won't be part of Semantic-ui specs. 🤷🏻‍♂️

How about packaging this as a separate package?

[pedrosimao]

@hugomn could you share with us this menu version with multi-levels and checkboxes? It is just what I need.

[ldalves]

@hugomn would you mind in sharing your code of this menu version with multi-levels and checkboxes?

[eugenetumachov]

Even though the issue is closed, it makes sense to provide everyone with a working example. This works for me:

<Dropdown item simple text="Select...">
  <Dropdown.Menu>
    <Dropdown.Item>
      <Checkbox label="Choice one" />
    </Dropdown.Item>
    <Dropdown.Item>
      <Checkbox label="Choice two" />
    </Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

However, some additional CSS is required to fix labels width and to make the list scrollable.
Here is also a CodeSandbox with some interaction: https://codesandbox.io/s/semantic-ui-dropdown-checkboxes-kxvq0

[sergivna]

scope.getLabel = function (item) { return '<input type="checkbox">' + item; };

<sm-dropdown items="property.values" label="getLabel(item.value)" value="item.value" />

I managed to do it in this way, in my angularJs project.
Maybe, it will help..