diff --git a/src/components/BlockComment.jsx b/src/components/FieldComment.jsx
similarity index 100%
rename from src/components/BlockComment.jsx
rename to src/components/FieldComment.jsx
diff --git a/src/components/BlockId.jsx b/src/components/FieldId.jsx
similarity index 100%
rename from src/components/BlockId.jsx
rename to src/components/FieldId.jsx
diff --git a/src/components/BlockMaxZoom.jsx b/src/components/FieldMaxZoom.jsx
similarity index 100%
rename from src/components/BlockMaxZoom.jsx
rename to src/components/FieldMaxZoom.jsx
diff --git a/src/components/BlockMinZoom.jsx b/src/components/FieldMinZoom.jsx
similarity index 100%
rename from src/components/BlockMinZoom.jsx
rename to src/components/FieldMinZoom.jsx
diff --git a/src/components/BlockSource.jsx b/src/components/FieldSource.jsx
similarity index 100%
rename from src/components/BlockSource.jsx
rename to src/components/FieldSource.jsx
diff --git a/src/components/BlockSourceLayer.jsx b/src/components/FieldSourceLayer.jsx
similarity index 100%
rename from src/components/BlockSourceLayer.jsx
rename to src/components/FieldSourceLayer.jsx
diff --git a/src/components/BlockType.jsx b/src/components/FieldType.jsx
similarity index 100%
rename from src/components/BlockType.jsx
rename to src/components/FieldType.jsx
diff --git a/stories/FieldComment.stories.js b/stories/FieldComment.stories.js
new file mode 100644
index 00000000..6c815d94
--- /dev/null
+++ b/stories/FieldComment.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldComment from '../src/components/FieldComment';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldComment',
+  component: FieldComment,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", "Hello\nworld");
+
+  return (
+    <Wrapper>
+      <FieldComment
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
diff --git a/stories/FieldId.stories.js b/stories/FieldId.stories.js
new file mode 100644
index 00000000..b2b97aed
--- /dev/null
+++ b/stories/FieldId.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldId from '../src/components/FieldId';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldId',
+  component: FieldId,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", "water");
+
+  return (
+    <Wrapper>
+      <FieldId
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
diff --git a/stories/FieldMaxZoom.stories.js b/stories/FieldMaxZoom.stories.js
new file mode 100644
index 00000000..729f889c
--- /dev/null
+++ b/stories/FieldMaxZoom.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldMaxZoom from '../src/components/FieldMaxZoom';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldMaxZoom',
+  component: FieldMaxZoom,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", 12);
+
+  return (
+    <Wrapper>
+      <FieldMaxZoom
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
diff --git a/stories/FieldMinZoom.stories.js b/stories/FieldMinZoom.stories.js
new file mode 100644
index 00000000..f88eaee8
--- /dev/null
+++ b/stories/FieldMinZoom.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldMinZoom from '../src/components/FieldMinZoom';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldMinZoom',
+  component: FieldMinZoom,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", 2);
+
+  return (
+    <Wrapper>
+      <FieldMinZoom
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
diff --git a/stories/FieldSource.stories.js b/stories/FieldSource.stories.js
new file mode 100644
index 00000000..25d9fded
--- /dev/null
+++ b/stories/FieldSource.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldSource from '../src/components/FieldSource';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldSource',
+  component: FieldSource,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", "openmaptiles");
+
+  return (
+    <Wrapper>
+      <FieldSource
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
diff --git a/stories/FieldSourceLayer.stories.js b/stories/FieldSourceLayer.stories.js
new file mode 100644
index 00000000..5d8b0ec1
--- /dev/null
+++ b/stories/FieldSourceLayer.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldSourceLayer from '../src/components/FieldSourceLayer';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldSourceLayer',
+  component: FieldSourceLayer,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", "water");
+
+  return (
+    <Wrapper>
+      <FieldSourceLayer
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
diff --git a/stories/FieldType.stories.js b/stories/FieldType.stories.js
new file mode 100644
index 00000000..2312bcac
--- /dev/null
+++ b/stories/FieldType.stories.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldType from '../src/components/FieldType';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldType',
+  component: FieldType,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", "background");
+
+  return (
+    <Wrapper>
+      <FieldType
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
diff --git a/stories/ui.js b/stories/ui.js
index 41cfb7fe..eb6333cf 100644
--- a/stories/ui.js
+++ b/stories/ui.js
@@ -11,7 +11,7 @@ export function Describe ({children}) {
 
 export function Wrapper ({children}) {
   return (
-    <div style={{maxWidth: "180px", margin: "0.4em"}}>
+    <div style={{maxWidth: "260px", margin: "0.4em"}}>
       {children}
     </div>
   );