diff --git a/packages/grafana-ui/src/components/Input/Input.story.tsx b/packages/grafana-ui/src/components/Input/Input.story.tsx
index 165709fd51e..c1cf60925e9 100644
--- a/packages/grafana-ui/src/components/Input/Input.story.tsx
+++ b/packages/grafana-ui/src/components/Input/Input.story.tsx
@@ -10,12 +10,11 @@ import mdx from './Input.mdx';
 import { parseAccessory } from './storyUtils';
 
 const prefixSuffixOpts = {
-  None: null,
-  Text: '$',
+  $: 'Text',
   ...getAvailableIcons().reduce<KeyValue<string>>((prev, c) => {
     return {
       ...prev,
-      [`Icon: ${c}`]: `icon-${c}`,
+      [`icon-${c}`]: `Icon: ${c}`,
     };
   }, {}),
 };
@@ -43,20 +42,22 @@ const meta: Meta = {
     prefixVisible: {
       control: {
         type: 'select',
-        options: prefixSuffixOpts,
+        labels: prefixSuffixOpts,
       },
+      options: [null, ...Object.keys(prefixSuffixOpts)],
     },
     suffixVisible: {
       control: {
         type: 'select',
-        options: prefixSuffixOpts,
+        labels: prefixSuffixOpts,
       },
+      options: [null, ...Object.keys(prefixSuffixOpts)],
     },
     type: {
       control: {
         type: 'select',
-        options: ['text', 'number', 'password'],
       },
+      options: ['text', 'number', 'password'],
     },
     // validation: { name: 'Validation regex (will do a partial match if you do not anchor it)' },
     width: { control: { type: 'range', min: 10, max: 200, step: 10 } },