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.

Khosrow

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

Tamratamsky

Storybook v7: you would move the options array as a child of color and a sibling of control. This also works in Storybook v6.2 – Messenger

This does not seem to work v6.5 – Filomena

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 },
  },
};

Unpeopled

do you know if we could connect options directly to .d.ts (typescript ), ex: if i have a interface of { varient?: "primary" | "secondary" | "dark" | "white" }, then making a enums again is i feel lazy – Eleanoraeleanore

Answer 3

In Storybook 7, like this

    propertyB: {
      options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
    },

Reference: https://storybook.js.org/docs/react/essentials/controls#dealing-with-complex-values

Cubby