Unnecessary Controls being added per component

[andyragu]

Summary

When upgrading from v7 to v8 in storybook, I noticed a big spike in my component's controls'. Increasing from 9 to 58.

Here's my default export:
export default { title: 'Components / Buttons / Standard Button', component: 'beacon-button', argTypes: { buttonText: 'Button', variant: { options: Object.values(CTAVariants), control: { type: 'select' }, }, scale: { options: [Scales.Mini, Scales.Normal, Scales.Jumbo], control: { type: 'select' }, }, buttonTarget: { options: ['_self', '_blank', '_parent', '_top'], control: { type: 'select' }, }, }, args: { disabled: false, variant: CTAVariants.Primary, scale: Scales.Normal, }, };

Is there a way to prevent these extra controls from appearing and ensure that only the controls defined in my default export are shown?

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

Storybook v8 infers controls more aggressively, which can lead to a spike in automatically generated controls for your components. To restrict the Controls panel to only the controls you explicitly define, you can use the controls.include parameter in your default export. For example:

export default {
  title: 'Components / Buttons / Standard Button',
  component: 'beacon-button',
  argTypes: {
    buttonText: 'Button',
    variant: {
      options: Object.values(CTAVariants),
      control: { type: 'select' },
    },
    scale: {
      options: [Scales.Mini, Scales.Normal, Scales.Jumbo],
      control: { type: 'select' },
    },
    buttonTarget: {
      options: ['_self', '_blank', '_parent', '_top'],
      control: { type: 'select' },
    },
  },
  args: {
    disabled: false,
    variant: CTAVariants.Primary,
    scale: Scales.Normal,
  },
  parameters: {
    controls: {
      include: ['buttonText', 'variant', 'scale', 'buttonTarget'],
    },
  },
};

Alternatively, you can use controls.exclude to hide unwanted controls, or set control: false in argTypes for any property you want to hide from the Controls panel. Manually defined argTypes always override what Storybook infers automatically. More details and examples are in the official docs and related discussions.

You can try these approaches to keep your Controls panel focused only on the fields you care about.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[andyragu]

@dosu Is there a way to turn off automatically generated controls?

[dosubot[bot]]

Yes, you can turn off all automatically generated controls by setting the controls.disable parameter to true. To do this globally, add the following to your main configuration file (e.g., main.js):

export default {
  parameters: {
    controls: { disable: true },
  },
};

To disable controls for a specific story or component, add it to the parameters section of your default export:

export default {
  // ...other meta fields
  parameters: {
    controls: { disable: true },
  },
};

This will remove the Controls panel and prevent Storybook from generating any controls for that scope. More details are in the official docs and example discussions.

If you only want to hide specific controls, you can use controls.include, controls.exclude, or set control: false in argTypes for individual properties.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[andyragu]

@dosu I'm only including certain controls however I see a ton of autogenerated controls and the controls I included I can't interact with. Here's my code:
export const FieldValidationSetCustomValidity = { name: 'Field Validation: setCustomValidity', argTypes: { disabled: { table: { disable: true, }, }, rawDisabled: { table: { disable: true, }, }, required: { table: { disable: true, }, }, readonly: { table: { disable: true, }, }, invalid: { table: { disable: true, }, }, error: { table: { disable: true, }, }, hint: { table: { disable: true, }, }, label: { table: { disable: true, }, }, }, parameters: { controls: { include: ['Reset', 'Language Code', 'Mode'], }, },

[dosubot[bot]]

The extra autogenerated controls appear because Storybook infers controls for all component props unless you explicitly disable them. The controls you included via controls.include are not interactive because they must be defined in your story's argTypes (with a control type) and in args (with an initial value) for Storybook to render them as interactive controls—just listing them in include is not enough docs.

To fix this, define each desired control (like 'Reset', 'Language Code', 'Mode') in both argTypes and args, for example:

export const FieldValidationSetCustomValidity = {
  name: 'Field Validation: setCustomValidity',
  argTypes: {
    Reset: { control: { type: 'boolean' } },
    'Language Code': { control: { type: 'select' }, options: ['en', 'fr', 'es'] },
    Mode: { control: { type: 'select' }, options: ['strict', 'loose'] },
    // Disable unwanted controls
    disabled: { control: false },
    rawDisabled: { control: false },
    required: { control: false },
    readonly: { control: false },
    invalid: { control: false },
    error: { control: false },
    hint: { control: false },
    label: { control: false },
  },
  args: {
    Reset: false,
    'Language Code': 'en',
    Mode: 'strict',
  },
  parameters: {
    controls: {
      include: ['Reset', 'Language Code', 'Mode'],
    },
  },
};

This will show only the controls you want and make them interactive. If you still see unwanted controls, set control: false for those properties in argTypes (not just table.disable: true) source.

If you use web components, Storybook may merge both attributes and properties, causing duplication. You can further filter controls using controls.exclude or by customizing your custom-elements manifest if needed discussion.

Let me know if you need help with a minimal reproduction or if you have a specific config/setup!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}