Add a multiselect knob

[shilman]

Issue by benediktvaldez Tuesday Feb 28, 2017 at 11:39 GMT Originally opened as https://github.com/storybooks/storybook-addon-knobs/issues/89

---

Is there any way to get a <select multiple> instead of just <select>?

Could in theory just be an option on the select() method

Can make a PR if there is interest?

[ndelangen]

Hey @benediktvaldez Sure sounds like this a perfectly fine feature for knobs! Please submit a PR!

[benediktvaldez]

Completely forgot about this – what an awesome idea haha 🤣

I'll look into it.

[ndelangen]

Here's something you might like to use: https://react.rocks/example/react-select-box

[ndelangen]

@benediktvaldez Still interested?

[benediktvaldez]

Actually yes, wow this one hasn't gotten a lot of love. I'll be needing this for a component I'm making right now, so I'll try to make the time to implement it ;)

Thanks for the reminder @ndelangen

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[mkochendorfer]

It would obviously be great to get true support into the knob for this, but in the meantime, here is a potential work around that people could use that just uses boolean knobs to simulate a multiselect behavior:

/**
 * A multiselect checkbox knob that generates an array.
 *
 * An temporary approach until https://github.com/storybooks/storybook/issues/806 is done.
 * @param label
 * @param options
 * @param defaultValue
 * @returns {Array}
 */
function multiselect(label, options, defaultValue) {
  const values = [];

  // Allow for default value to be an array or a single value.
  const defaultValues = _.isArray(defaultValue) ? defaultValue : [defaultValue];

  // Create checkboxes for each value in the multiselect.
  _.forEach(options, (value, key) => {
    const checkboxLabel = _.isNumber(key) ? `${label}: ${value}` : key;

    const selected = boolean(checkboxLabel, _.includes(defaultValues, value));

    if (selected) {
      values.push(value);
    }
  });

  return values;
}

[danielduan]

I'm gonna go ahead and close this ticket. It's been open wayy too long.

If someone is willing to implement this, please open a new issue or PR and reference this one.

[garrettmaring]

If anyone's still looking for this, it works under the optionsKnob.

[jjorissen52]

The optionsKnob way wasn't working for me. However, Storybook controls do support a multi-select:

export default {
  title: "Example/Button",
  component: Button,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    variants: {
      options: Object.values(BUTTON_VARIANTS),
      control: { type: "multi-select" },
    },
  },
}