Storybook default selection control value

Question

I'm using Storybook with React, and trying to add storybook select control with default value, but with no success. There's nothing about that in documentation.

I need one of the options above to be selected by default.

    argTypes: {
        iconSrc: {
            options: Object.keys(iconTypes),
            mapping: iconTypes,
            control: {
                sort: 'requiredFirst',
                type: 'select',
                labels: {
                    BlueStep: 'Blue Step',
                    Step: 'Step',
                    Globe: 'Globe',
                },
            },
        },
    }

Answer 1

You have to add the table key

your storybook will look like this:

 argTypes: {
        iconSrc: {
            options: Object.keys(iconTypes),
            mapping: iconTypes,
            control: {
                sort: 'requiredFirst',
                type: 'select',
                labels: {
                    BlueStep: 'Blue Step',
                    Step: 'Step',
                    Globe: 'Globe',
                },
            },
            table: {
              type: { summary: 'select' },
              defaultValue: { summary: 'Step' },
            },
        },
    }

Answer 2

The most upvoted answer at time of writing refers to the table key, which is used for specifying how an arg is documented.

However the question is asking how to set a default that will be the initially selected option on the <select/> element rendered when using the select control. In the rendered HTML this would be done by setting the selected boolean on the <option/> intended as default.

It appears that Storybook does not expose a way to accomplish this, and that this is by design (for better or worse). Instead an optional control value is initialized to undefined. defaultValue has been deprecated.