storybook

How do I get dropdown in controls addon for Storybook?

I want to get this: enter image description here

My stories.tsx code looks like this:

export default {
  title: "Components/Switch",
  argTypes: {
    color: { control: "select", options: ["primary", "secondary"] },
  },
};

However, the page just fails to render when I do that.

To reproduce:

Clone this repository: https://github.com/jauggy/storybook-args-error

npm i

npm run storybook

Select the Switch component on the left menu.

Solution

  • you should send an object to the control property. Like this:

    export default {
  title: "Components/Switch",
  argTypes: {
    color: { control: { type: "select", options: ["primary", "secondary"] } },
  },
};

    Update after Storybook v7 control.options will be deprecated for more info go to: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-controloptions