diff --git a/test/browser/components/sys-form-button/colors.js b/test/browser/components/sys-form-button/colors.js
new file mode 100644
index 0000000..2925aec
--- /dev/null
+++ b/test/browser/components/sys-form-button/colors.js
@@ -0,0 +1,14 @@
+import { Selector } from 'testcafe'
+
+import { assertScreenshot } from '../../../utility/browser'
+
+fixture`SysFormButton Colors`
+  .page`http://localhost:7684/iframe.html?id=high-level-components-button--colors&viewMode=story`
+
+const button = (i) => Selector(`#root button:nth-child(${i})`)
+
+test('screenshots', async (t) => {
+  await assertScreenshot(button(1), 'components/sys-form-button/colors-normal')
+  await assertScreenshot(button(2), 'components/sys-form-button/colors-primary')
+  await assertScreenshot(button(3), 'components/sys-form-button/colors-secondary')
+})
diff --git a/test/browser/sys-form/custom-submit.js b/test/browser/components/sys-form/custom-submit.js
similarity index 82%
rename from test/browser/sys-form/custom-submit.js
rename to test/browser/components/sys-form/custom-submit.js
index 0c04fa1..a4c1c6e 100644
--- a/test/browser/sys-form/custom-submit.js
+++ b/test/browser/components/sys-form/custom-submit.js
@@ -1,6 +1,6 @@
 import { Selector } from 'testcafe'
 
-import { assertScreenshot } from '../../utility/browser'
+import { assertScreenshot } from '../../../utility/browser'
 
 fixture`SysForm CustomSubmit`
   .page`http://localhost:7684/iframe.html?id=high-level-components-form--custom-submit&viewMode=story`
@@ -20,10 +20,10 @@ test('login button is reactive to form errors', async (t) => {
   await t.typeText(password, 'validpassword')
   await t.pressKey('tab')
   await t.expect(button.getAttribute('disabled')).eql(undefined)
-  await assertScreenshot(form, 'sys-form/reactive-enabled')
+  await assertScreenshot(form, 'components/sys-form/reactive-enabled')
   await t.typeText(email, 'nope', { replace: true })
   await t.typeText(password, 'nope', { replace: true })
   await t.pressKey('tab')
   await t.expect(button.getAttribute('disabled')).eql('disabled')
-  await assertScreenshot(form, 'sys-form/reactive-disabled')
+  await assertScreenshot(form, 'components/sys-form/reactive-disabled')
 })
diff --git a/test/browser/examples/registration.js b/test/browser/examples/registration.js
new file mode 100644
index 0000000..0521961
--- /dev/null
+++ b/test/browser/examples/registration.js
@@ -0,0 +1,38 @@
+import { Selector, t } from 'testcafe'
+
+fixture`SysForm CustomSubmit`
+  .page`http://localhost:7684/iframe.html?id=examples-register--normal&viewMode=story`
+
+const firstName = Selector('input#given_name')
+const lastName = Selector('input#family_name')
+const email = Selector('input#email')
+const phone = Selector('input#phone_number')
+const password = Selector('input#new_password')
+const confirmed = Selector('input#password_confirm')
+const button = Selector('button')
+
+async function fill (values) {
+  await t.typeText(firstName, values.firstName || 'first')
+  await t.typeText(lastName, values.lastName || 'last')
+  await t.typeText(email, values.email || 'example@example.com')
+  await t.typeText(phone, values.phone || '1 234 567 8901')
+  await t.typeText(password, values.password || 'example')
+  await t.typeText(confirmed, values.confirmed || values.password || 'example')
+  await t.pressKey('tab')
+}
+
+test('allows spaces in first name', async (t) => {
+  await fill({ firstName: 'john joe bob son' })
+  await t.expect(button.getAttribute('disabled')).eql(undefined)
+})
+
+test('password confirmation', async (t) => {
+  await fill({
+    password: 'thisisapassword',
+    confirmed: 'incorrect password'
+  })
+
+  await t.expect(button.getAttribute('disabled')).eql('disabled')
+  await t.typeText(confirmed, 'thisisapassword', { replace: true })
+  await t.expect(button.getAttribute('disabled')).eql(undefined)
+})
diff --git a/test/browser/sys-form-button/colors.js b/test/browser/sys-form-button/colors.js
deleted file mode 100644
index f960413..0000000
--- a/test/browser/sys-form-button/colors.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Selector } from 'testcafe'
-
-import { assertScreenshot } from '../../utility/browser'
-
-fixture`SysFormButton Colors`
-  .page`http://localhost:7684/iframe.html?id=high-level-components-button--colors&viewMode=story`
-
-const button = (i) => Selector(`#root button:nth-child(${i})`)
-
-test('screenshots', async (t) => {
-  await assertScreenshot(button(1), 'sys-form-button/colors-normal')
-  await assertScreenshot(button(2), 'sys-form-button/colors-primary')
-  await assertScreenshot(button(3), 'sys-form-button/colors-secondary')
-})
diff --git a/test/screenshots/tests/sys-form-button/colors-normal.png b/test/screenshots/tests/components/sys-form-button/colors-normal.png
similarity index 100%
rename from test/screenshots/tests/sys-form-button/colors-normal.png
rename to test/screenshots/tests/components/sys-form-button/colors-normal.png
diff --git a/test/screenshots/tests/sys-form-button/colors-primary.png b/test/screenshots/tests/components/sys-form-button/colors-primary.png
similarity index 100%
rename from test/screenshots/tests/sys-form-button/colors-primary.png
rename to test/screenshots/tests/components/sys-form-button/colors-primary.png
diff --git a/test/screenshots/tests/sys-form-button/colors-secondary.png b/test/screenshots/tests/components/sys-form-button/colors-secondary.png
similarity index 100%
rename from test/screenshots/tests/sys-form-button/colors-secondary.png
rename to test/screenshots/tests/components/sys-form-button/colors-secondary.png
diff --git a/test/screenshots/tests/sys-form-button/thumbnails/colors-normal.png b/test/screenshots/tests/components/sys-form-button/thumbnails/colors-normal.png
similarity index 100%
rename from test/screenshots/tests/sys-form-button/thumbnails/colors-normal.png
rename to test/screenshots/tests/components/sys-form-button/thumbnails/colors-normal.png
diff --git a/test/screenshots/tests/sys-form-button/thumbnails/colors-primary.png b/test/screenshots/tests/components/sys-form-button/thumbnails/colors-primary.png
similarity index 100%
rename from test/screenshots/tests/sys-form-button/thumbnails/colors-primary.png
rename to test/screenshots/tests/components/sys-form-button/thumbnails/colors-primary.png
diff --git a/test/screenshots/tests/sys-form-button/thumbnails/colors-secondary.png b/test/screenshots/tests/components/sys-form-button/thumbnails/colors-secondary.png
similarity index 100%
rename from test/screenshots/tests/sys-form-button/thumbnails/colors-secondary.png
rename to test/screenshots/tests/components/sys-form-button/thumbnails/colors-secondary.png
diff --git a/test/screenshots/tests/sys-form/reactive-disabled.png b/test/screenshots/tests/components/sys-form/reactive-disabled.png
similarity index 100%
rename from test/screenshots/tests/sys-form/reactive-disabled.png
rename to test/screenshots/tests/components/sys-form/reactive-disabled.png
diff --git a/test/screenshots/tests/sys-form/reactive-enabled.png b/test/screenshots/tests/components/sys-form/reactive-enabled.png
similarity index 100%
rename from test/screenshots/tests/sys-form/reactive-enabled.png
rename to test/screenshots/tests/components/sys-form/reactive-enabled.png
diff --git a/test/screenshots/tests/sys-form/thumbnails/reactive-disabled.png b/test/screenshots/tests/components/sys-form/thumbnails/reactive-disabled.png
similarity index 100%
rename from test/screenshots/tests/sys-form/thumbnails/reactive-disabled.png
rename to test/screenshots/tests/components/sys-form/thumbnails/reactive-disabled.png
diff --git a/test/screenshots/tests/sys-form/thumbnails/reactive-enabled.png b/test/screenshots/tests/components/sys-form/thumbnails/reactive-enabled.png
similarity index 100%
rename from test/screenshots/tests/sys-form/thumbnails/reactive-enabled.png
rename to test/screenshots/tests/components/sys-form/thumbnails/reactive-enabled.png