How do I get dropdown in controls addon for Storybook?

Question

I want to get this:

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.

Answer 1

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

Answer 2

You could also provide there an enum:

const SwitchTypeEnum {
    PRIMARY = "primary",
    SECONDARY = "secondary",
}

export default {
  title: "Components/Switch",
  argTypes: {
    table: {
        summary: "SwitchTypeEnum",
        defaultValue: { summary: "SwitchTypeEnum.PRIMARY" },
    },
    color: { control: { type: "select", options: SwitchTypeEnum },
  },
};