diff --git a/BoxSelector/example.jsx b/BoxSelector/example.jsx
index 03e1a0b4..71acea49 100644
--- a/BoxSelector/example.jsx
+++ b/BoxSelector/example.jsx
@@ -29,7 +29,6 @@ export default {
       Controlled: (
         <BoxSelector
           onChange={(key) => console.log('You selected', key)}
-          name='installments2'
           value='installments_24'
           focus='installments_6'
           options={options}
diff --git a/BoxSelector/index.jsx b/BoxSelector/index.jsx
index c36f5537..61351d17 100644
--- a/BoxSelector/index.jsx
+++ b/BoxSelector/index.jsx
@@ -7,7 +7,8 @@ import compose from 'ramda/src/compose'
 import {
   overridable,
   themeable,
-  uncontrolled
+  uncontrolled,
+  uniqueName
 } from '@klarna/higher-order-components'
 
 const baseClass = 'box-selector'
@@ -310,5 +311,6 @@ export default compose(
       labelColor: customizations.color_text
     }
   })),
-  overridable(defaultStyles)
+  overridable(defaultStyles),
+  uniqueName
 )(BoxSelector)
diff --git a/Dropdown/example.jsx b/Dropdown/example.jsx
index d2a47468..c2990d87 100644
--- a/Dropdown/example.jsx
+++ b/Dropdown/example.jsx
@@ -22,52 +22,57 @@ export default {
         Regular: <Dropdown
           label='Lorem ipsum'
           options={options}
-                 />,
+        />,
 
         Controlled: <Dropdown
-          name='dropdown-lorem-ipsum'
           label='Lorem ipsum'
           options={options}
           focus
           value='lorem'
-                    />,
+        />,
+
+        'With name': <Dropdown
+          label='Lorem ipsum'
+          name='dolor-sit-amet'
+          options={options}
+        />,
 
         'With fake focus': <Dropdown
           focus='fake'
           label='Lorem ipsum'
           options={options}
-                           />,
+        />,
 
         Loading: <Dropdown
           label='Wait...'
           loading
           options={options}
-                 />,
+        />,
 
         Disabled: <Dropdown
           disabled
           label='Disabled'
           options={options}
-                  />,
+        />,
 
         'Exclude Mouseflow': <Dropdown
           mouseflowExclude
           label='Disabled'
           value='lorem'
           options={options}
-                             />,
+        />,
 
         'With error': <Dropdown
           label='Something went wrong'
           error
           options={options}
-                      />,
+        />,
 
         'With warning': <Dropdown
           label='Something is incorect'
           warning
           options={options}
-                        />
+        />
       }
     },
 
@@ -80,30 +85,63 @@ import Fieldset from '@klarna/ui/Fieldset'`,
       examples: {
         'Two fields': <Fieldset>
           <Dropdown
-            left size='1/2' name='dropdown-given-name' label='Given name' options={options} />
+            left size='1/2'
+            label='Given name'
+            options={options}
+          />
           <Dropdown
-            right size='1/2' name='dropdown-last-name' label='Middle name' options={options} />
+            right size='1/2'
+            label='Middle name'
+            options={options}
+          />
         </Fieldset>,
 
         Many: <Fieldset>
           <Dropdown
-            top left size='1/2' name='many-given-name' label='Given name' options={options} />
+            top left size='1/2'
+            label='Given name'
+            options={options}
+          />
           <Dropdown
-            center size='1/4' name='many-middle-name' label='Middle name' options={options} />
+            center size='1/4'
+            label='Middle name'
+            options={options}
+          />
           <Dropdown
-            top right size='1/4' name='many-last-name' label='Last name' options={options} />
+            top right size='1/4'
+            label='Last name'
+            options={options}
+          />
           <Dropdown
-            left square size='1/5' name='many-number' label='Number' options={options} />
+            left square size='1/5'
+            label='Number'
+            options={options}
+          />
           <Dropdown
-            right square size='4/5' name='many-street-address' label='Street Address' options={options} />
+            right square size='4/5'
+            label='Street Address'
+            options={options}
+          />
           <Dropdown
-            left square size='1/3' name='many-pokemon' label='Your favorite pokémon' options={options} />
+            left square size='1/3'
+            label='Your favorite pokémon'
+            options={options}
+          />
           <Dropdown
-            right square size='2/3' name='many-android-iphone' label='Android or iPhone: please explain' options={options} />
+            right square size='2/3'
+            label='Android or iPhone: please explain'
+            options={options}
+          />
           <Dropdown
-            left bottom size='2/5' name='many-date-of-birth' label='Date of Birth' options={options} />
+            left bottom size='2/5'
+            label='Date of Birth'
+            options={options}
+          />
           <Dropdown
-            right bottom size='3/5' name='many-mobile-phone-number' label='Mobile phone number' options={options} />
+            right bottom size='3/5'
+            label='Mobile phone number'
+            options={options}
+          />
         </Fieldset>
       }
     }
diff --git a/Dropdown/index.jsx b/Dropdown/index.jsx
index 9bcef19a..654fe980 100644
--- a/Dropdown/index.jsx
+++ b/Dropdown/index.jsx
@@ -11,7 +11,8 @@ import compose from 'ramda/src/compose'
 import {
   overridable,
   themeable,
-  uncontrolled
+  uncontrolled,
+  uniqueName
 } from '@klarna/higher-order-components'
 
 const baseClass = 'dropdown'
@@ -254,5 +255,6 @@ export default compose(
       selectedColor: customizations.color_text
     }
   })),
-  overridable(defaultStyles)
+  overridable(defaultStyles),
+  uniqueName
 )(Dropdown)
diff --git a/Field/PinCode/index.jsx b/Field/PinCode/index.jsx
index 7a56c397..c377905b 100644
--- a/Field/PinCode/index.jsx
+++ b/Field/PinCode/index.jsx
@@ -6,7 +6,8 @@ import compose from 'ramda/src/compose'
 import {
   overridable,
   themeable,
-  uncontrolled
+  uncontrolled,
+  uniqueName
 } from '@klarna/higher-order-components'
 
 const baseClass = 'field-code'
@@ -106,5 +107,6 @@ export default compose(
       inputColor: customizations.color_text
     }
   })),
-  overridable(defaultStyles)
+  overridable(defaultStyles),
+  uniqueName
 )(PinCode)
diff --git a/Field/example.jsx b/Field/example.jsx
index 6e6a5d6e..87aa8b3b 100644
--- a/Field/example.jsx
+++ b/Field/example.jsx
@@ -19,14 +19,15 @@ export default {
         Regular: <Field label='Enter your email' />,
 
         Controlled: <Field
-          name='field-controlled'
           label='Enter your email'
           value='someone@example.com'
           focus
-                    />,
+        />,
 
         Big: <Field label='Enter your email' big />,
 
+        'With name': <Field name='email' label='Enter your email' />,
+
         'With fake focus': <Field label='Enter your email' focus='fake' />,
 
         Disabled: <Field disabled label='Address' defaultValue='16, Corn street' />,
@@ -35,7 +36,7 @@ export default {
           mouseflowExclude
           label='Address'
           defaultValue='16, Corn street'
-                             />,
+        />,
 
         'With error': <Field label='Invalid email' error defaultValue='invalid@' />,
 
@@ -43,14 +44,13 @@ export default {
           label='Are you sure the domain is exanple?'
           warning
           defaultValue='email@exanple.com'
-                        />,
+        />,
 
         'With customizations': <Field
-          name='with-customizations'
           customize={{ borderColor: '#3500C8', borderColorSelected: '#3500C8', borderRadius: '15px', inputColor: 'green', labelColor: 'red' }}
           label='Favorite color'
           defaultValue='Purple'
-                               />
+        />
       }
     },
 
@@ -67,7 +67,8 @@ import ReactMaskedInput from 'react-maskedinput'`,
             Input={ReactMaskedInput}
             mask='1111 1111 1111 1111'
             placeholder=' '
-                />,
+          />,
+
           code: `<Field
   label='Credit card number'
   Input={ReactMaskedInput}
@@ -164,20 +165,20 @@ import Fieldset from '@klarna/ui/Fieldset'`,
 
       examples: {
         'Two fields': <Fieldset margins>
-          <Field left size='1/2' name='two-given-name' label='Given name' />
-          <Field right size='1/2' name='two-middle-name' label='Middle name' />
+          <Field left size='1/2' label='Given name' />
+          <Field right size='1/2' label='Middle name' />
         </Fieldset>,
 
         Many: <Fieldset margins>
-          <Field top left size='1/2' name='many-given-name' label='Given name' />
-          <Field center size='1/4' name='many-middle-name' label='Middle name' />
-          <Field top right size='1/4' name='many-last-name' label='Last name' />
-          <Field left square size='1/5' name='many-number' label='Number' />
-          <Field right square size='4/5' name='many-street-address' label='Street Address' />
-          <Field left square size='1/3' name='many-pokemon' label='Your favorite pokémon' />
-          <Field right square size='2/3' name='many-android-iphone' label='Android or iPhone: please explain' />
-          <Field left bottom size='2/5' name='many-date-of-birth' label='Date of Birth' />
-          <Field right bottom size='3/5' name='many-mobile-phone-number' label='Mobile phone number' />
+          <Field top left size='1/2' label='Given name' />
+          <Field center size='1/4' label='Middle name' />
+          <Field top right size='1/4' label='Last name' />
+          <Field left square size='1/5' label='Number' />
+          <Field right square size='4/5' label='Street Address' />
+          <Field left square size='1/3' label='Your favorite pokémon' />
+          <Field right square size='2/3' label='Android or iPhone: please explain' />
+          <Field left bottom size='2/5' label='Date of Birth' />
+          <Field right bottom size='3/5' label='Mobile phone number' />
         </Fieldset>
       }
     },
diff --git a/Field/index.jsx b/Field/index.jsx
index 13d198b0..85f937d0 100644
--- a/Field/index.jsx
+++ b/Field/index.jsx
@@ -12,7 +12,8 @@ import compose from 'ramda/src/compose'
 import {
   overridable,
   themeable,
-  uncontrolled
+  uncontrolled,
+  uniqueName
 } from '@klarna/higher-order-components'
 
 export PinCode from './PinCode'
@@ -282,5 +283,6 @@ export default compose(
       inputColor: customizations.color_text
     }
   })),
-  overridable(defaultStyles)
+  overridable(defaultStyles),
+  uniqueName
 )(Field)
diff --git a/Input/example.jsx b/Input/example.jsx
index a412978d..e5282815 100644
--- a/Input/example.jsx
+++ b/Input/example.jsx
@@ -16,22 +16,31 @@ export default {
 
       examples: {
         Regular: <Input label='Enter your email' />,
+
         Controlled: <Input
-          name='input-controlled'
           label='Enter your email'
           value='someone@example.com'
           focus
-                    />,
+        />,
+
         Big: <Input label='Enter your email' big />,
+
         Giant: <Input label='Enter your email' giant />,
+
+        'With name': <Input label='Enter your email' name='email' />,
+
         'Fake focused': <Input label='Enter your email' focus='fake' />,
+
         Disabled: <Input disabled label='Address' defaultValue='16, Corn street' />,
+
         'Exclude Mouseflow': <Input
           mouseflowExclude
           label='Address'
           defaultValue='16, Corn street'
         />,
+
         'With error': <Input label='Invalid email' error defaultValue='invalid@' />,
+
         'With warning': <Input
           label='Are you sure the domain is exanple?'
           warning
@@ -74,80 +83,67 @@ import Fieldset from '@klarna/ui/Fieldset'`,
         Regular: [
           <Fieldset margins key={0}>
             <Input
-              name='icon-card'
               icon={icons.BANK}
               label='Please enter your bank account number' />
           </Fieldset>,
           <Fieldset margins key={1}>
             <Input
-              name='icon-card'
               icon={icons.CARD}
               label='Please enter your credit card number' />
           </Fieldset>,
           <Fieldset margins key={2}>
             <Input
-              name='icon-calendar'
               icon={icons.CALENDAR}
               label='Date of Birth' />
           </Fieldset>,
           <Fieldset margins key={3}>
             <Input
-              name='icon-lock'
               icon={icons.LOCK}
               type='password'
               label='Password' />
           </Fieldset>,
           <Fieldset margins key={4}>
             <Input
-              name='icon-person'
               icon={icons.PERSON}
               label='Enter your user name' />
           </Fieldset>,
           <Fieldset margins key={5}>
             <Input
-              name='icon-email'
               icon={icons.EMAIL}
               label='Enter your email address' />
           </Fieldset>,
           <Fieldset margins key={6}>
             <Input
-              name='icon-phone'
               icon={icons.PHONE}
               label='Mobile number' />
           </Fieldset>,
           <Fieldset margins key={7}>
             <Input
-              name='icon-close'
               icon={icons.CLOSE}
               label='Enter an incorrect value (?)' />
           </Fieldset>,
           <Fieldset margins key={8}>
             <Input
-              name='icon-question'
               icon={icons.QUESTION}
               label='Are we sure about these being field icons?' />
           </Fieldset>,
           <Fieldset margins key={9}>
             <Input
-              name='icon-check'
               icon={icons.CHECK}
               label='These look like button icons really' />
           </Fieldset>,
           <Fieldset margins key={10}>
             <Input
-              name='icon-logout'
               icon={icons.LOGOUT}
               label='Write something to log out' />
           </Fieldset>,
           <Fieldset margins key={11}>
             <Input
-              name='icon-search'
               icon={icons.SEARCH}
               label='Write something to search' />
           </Fieldset>,
           <Fieldset margins key={12}>
             <Input
-              name='icon-giant'
               giant
               icon={icons.PHONE}
               label='Line number' />
@@ -164,26 +160,26 @@ import Fieldset from '@klarna/ui/Fieldset'`,
 
       examples: {
         'Two fields': <Fieldset margins>
-          <Input left size='1/2' name='two-given-name' label='Given name' />
-          <Input right size='1/2' name='two-middle-name' label='Middle name' />
+          <Input left size='1/2' label='Given name' />
+          <Input right size='1/2' label='Middle name' />
         </Fieldset>,
 
         'Card like form': <Fieldset margins>
-          <Input name='card-number' label='Card number' />
-          <Input left size='1/2' name='card-expiration' label='MM / YY' />
-          <Input right size='1/2' name='card-ccv' label='CCV' />
+          <Input label='Card number' />
+          <Input left size='1/2' label='MM / YY' />
+          <Input right size='1/2' label='CCV' />
         </Fieldset>,
 
         Many: <Fieldset margins>
-          <Input left size='1/2' name='many-given-name' label='Given name' />
-          <Input center size='1/4' name='many-middle-name' label='Middle name' />
-          <Input right size='1/4' name='many-last-name' label='Last name' />
-          <Input left size='1/5' name='many-number' label='Number' />
-          <Input right size='4/5' name='many-street-address' label='Street Address' />
-          <Input left size='1/3' name='many-pokemon' label='Your favorite pokémon' />
-          <Input right size='2/3' name='many-android-iphone' label='Android or iPhone: please explain' />
-          <Input left size='2/5' name='many-date-of-birth' label='Date of Birth' />
-          <Input right size='3/5' name='many-mobile-phone-number' label='Mobile phone number' />
+          <Input left size='1/2' label='Given name' />
+          <Input center size='1/4' label='Middle name' />
+          <Input right size='1/4' label='Last name' />
+          <Input left size='1/5' label='Number' />
+          <Input right size='4/5' label='Street Address' />
+          <Input left size='1/3' label='Your favorite pokémon' />
+          <Input right size='2/3' label='Android or iPhone: please explain' />
+          <Input left size='2/5' label='Date of Birth' />
+          <Input right size='3/5' label='Mobile phone number' />
         </Fieldset>
       }
     }
diff --git a/Input/index.jsx b/Input/index.jsx
index e2335f6e..5e4e2de4 100644
--- a/Input/index.jsx
+++ b/Input/index.jsx
@@ -9,7 +9,7 @@ import { handleKeyDown } from '../lib/features/keyboardEvents'
 import MouseflowExclude from '../MouseflowExclude'
 
 import compose from 'ramda/src/compose'
-import {uncontrolled} from '@klarna/higher-order-components'
+import {uncontrolled, uniqueName} from '@klarna/higher-order-components'
 
 const baseClass = 'input'
 
@@ -210,5 +210,6 @@ export default compose(
     defaultProp: 'defaultValue',
     handlerName: 'onChange',
     handlerSelector: (e) => e.target.value
-  })
+  }),
+  uniqueName
 )(Input)
diff --git a/Menu/Segmented/index.jsx b/Menu/Segmented/index.jsx
index 8783a087..287caa38 100644
--- a/Menu/Segmented/index.jsx
+++ b/Menu/Segmented/index.jsx
@@ -3,7 +3,7 @@ import classNamesBind from 'classnames/bind'
 import defaultStyles from './styles.scss'
 
 import compose from 'ramda/src/compose'
-import {uncontrolled} from '@klarna/higher-order-components'
+import {uncontrolled, uniqueName} from '@klarna/higher-order-components'
 
 const baseClass = 'segmented'
 
@@ -139,5 +139,6 @@ export default compose(
     defaultProp: 'defaultValue',
     handlerName: 'onChange',
     handlerSelector: (x) => x
-  })
+  }),
+  uniqueName
 )(Segmented)
diff --git a/Menu/Tab/index.jsx b/Menu/Tab/index.jsx
index 2c330f13..5f4f0529 100644
--- a/Menu/Tab/index.jsx
+++ b/Menu/Tab/index.jsx
@@ -4,7 +4,7 @@ import classNamesBind from 'classnames/bind'
 import defaultStyles from './styles.scss'
 
 import compose from 'ramda/src/compose'
-import {uncontrolled} from '@klarna/higher-order-components'
+import {uncontrolled, uniqueName} from '@klarna/higher-order-components'
 
 const baseClass = 'tab-menu'
 
@@ -161,5 +161,6 @@ export default compose(
     defaultProp: 'defaultValue',
     handlerName: 'onChange',
     handlerSelector: (x) => x
-  })
+  }),
+  uniqueName
 )(Tab)
diff --git a/Menu/example.jsx b/Menu/example.jsx
index 58d736c2..18ee266a 100644
--- a/Menu/example.jsx
+++ b/Menu/example.jsx
@@ -30,7 +30,6 @@ export default {
           <Menu.Tab
             onChange={(key) => console.log('You selected', key)}
             tabDisplay='fluid'
-            name='tab-fluid'
             defaultValue='home'
             options={options}
           />
@@ -40,7 +39,6 @@ export default {
           <Menu.Tab
             onChange={(key) => console.log('You selected', key)}
             tabDisplay='static'
-            name='tab-static'
             defaultValue='home'
             options={options}
           />
@@ -48,7 +46,7 @@ export default {
 
         Controlled: (
           <Menu.Tab
-            name='controlled-tab'
+            name='tab'
             tabDisplay='fluid'
             focus='faq'
             value='home'
@@ -60,7 +58,6 @@ export default {
           <Menu.Tab
             onChange={(key) => console.log('You selected', key)}
             tabDisplay='static'
-            name='tab-static-white'
             defaultValue='home'
             white
             options={options}
@@ -70,7 +67,6 @@ export default {
         'With components as labels': <Menu.Tab
           onChange={(key) => console.log('You selected', key)}
           tabDisplay='static'
-          name='options-with-components'
           defaultValue='home'
           options={optionsWithComponents}
         />
@@ -86,7 +82,6 @@ export default {
         Fluid: (
           <Menu.Segmented
             onChange={(key) => console.log('You selected', key)}
-            name='segmented-fluid'
             defaultValue='home'
             options={options}
           />
@@ -96,7 +91,6 @@ export default {
           <Menu.Segmented
             onChange={(key) => console.log('You selected', key)}
             tabDisplay='static'
-            name='segmented-static'
             defaultValue='home'
             options={options}
           />
@@ -104,7 +98,7 @@ export default {
 
         Controlled: (
           <Menu.Segmented
-            name='controlled-segmented'
+            name='segmented'
             focus='faq'
             value='home'
             options={options}
diff --git a/MouseflowExclude/example.jsx b/MouseflowExclude/example.jsx
index df699018..391e40be 100644
--- a/MouseflowExclude/example.jsx
+++ b/MouseflowExclude/example.jsx
@@ -17,13 +17,11 @@ import Field from '@klarna/ui/Field'`,
       Regular: {
         code: `<MouseflowExclude>
   <Field
-    name='a-sensitive-valued-field'
     label='Sensitive information'
   />
 </MouseflowExclude>`,
         live: <MouseflowExclude>
           <Field
-            name='a-sensitive-valued-field'
             label='Sensitive information'
           />
         </MouseflowExclude>
@@ -31,13 +29,11 @@ import Field from '@klarna/ui/Field'`,
 
       'Higher-order component': {
         live: <ExcludedField
-          name='a-sensitive-valued-field'
           label='Sensitive information'
         />,
         code: `const ExcludedField = exclude(Field)
 
 <ExcludedField
-  name='a-sensitive-valued-field'
   label='Sensitive information'
 />`
       }
diff --git a/Radio/example.jsx b/Radio/example.jsx
index 2deab313..e566bc5d 100644
--- a/Radio/example.jsx
+++ b/Radio/example.jsx
@@ -38,7 +38,6 @@ const optionsWithContent = [
     description: 'Amet et consequetur',
     content: <div>
       <BoxSelector
-        name='installments'
         onChange={(key) => console.log('You selected', key)}
         options={[{content: <div>Long one line text in div</div>, key: 'installments_3'}, {content: [<div key='1'>$64.17/mo.</div>, <div key='2'>array of elements</div>], key: 'installments_6'}]}
         defaultValue='installments_6'
@@ -59,7 +58,6 @@ const optionsWithContent = [
       <Subtitle>Choose your destiny</Subtitle>
 
       <Dropdown
-        name='ipsum-dropdown'
         options={[
           {key: 'coffee', label: 'Coffee'},
           {key: 'chai', label: 'Chai'},
@@ -82,20 +80,18 @@ export default {
     examples: {
       Regular: <Radio
         onChange={(key) => console.log(key)}
-        name='radio-regular'
         options={optionsWithContent}
         defaultValue='lorem'
       />,
 
       'Without content': <Radio
-        name='radio-borderful-with-content'
         onChange={(key) => console.log(key)}
         options={options}
       />,
 
       Controlled: <Radio
         focus='sit'
-        name='radio-controlled'
+        name='radio'
         onChange={(key) => console.log(key)}
         options={options}
         value='ipsum'
@@ -103,7 +99,6 @@ export default {
 
       Borderless: <Radio
         borderless
-        name='radio-borderless'
         onChange={(key) => console.log(key)}
         options={options}
         defaultValue='lorem'
@@ -111,7 +106,6 @@ export default {
 
       Disabled: <Radio
         disabled
-        name='radio-disabled'
         onChange={(key) => console.log(key)}
         options={options}
         defaultValue='lorem'
@@ -119,7 +113,6 @@ export default {
 
       'One field disabled': <Radio
         onChange={(key) => console.log(key)}
-        name='radio-one-disabled'
         options={[
           ...optionsWithContent.slice(0, 2),
           {...optionsWithContent[2], disabled: true}
@@ -130,13 +123,11 @@ export default {
       'Borderless and disabled': <Radio
         borderless
         disabled
-        name='radio-borderless-disabled'
         options={options}
         defaultValue='lorem'
-                                 />,
+      />,
 
       'With a single option': <Radio
-        name='radio-with-a-single-option'
         options={[{
           key: 'lorem',
           label: 'Lorem',
@@ -157,7 +148,6 @@ export default {
           textPrimaryColor: 'green',
           textSecondaryColor: 'red'
         }}
-        name='radio-with-dynamic-styling'
         options={options}
       />
     }
diff --git a/Radio/index.jsx b/Radio/index.jsx
index 2319e8d6..d31ab2b8 100644
--- a/Radio/index.jsx
+++ b/Radio/index.jsx
@@ -6,7 +6,8 @@ import defaultStyles from './styles.scss'
 import compose from 'ramda/src/compose'
 import {
   themeable,
-  uncontrolled
+  uncontrolled,
+  uniqueName
 } from '@klarna/higher-order-components'
 
 const baseClass = 'radio'
@@ -218,5 +219,6 @@ export default compose(
       textPrimaryColor: customizations.color_text,
       textSecondaryColor: customizations.color_text_secondary
     }
-  }))
+  })),
+  uniqueName
 )(Radio)
diff --git a/Selector/Options/index.jsx b/Selector/Options/index.jsx
index 8178028f..cedf0052 100644
--- a/Selector/Options/index.jsx
+++ b/Selector/Options/index.jsx
@@ -4,7 +4,7 @@ import defaultStyles from './styles.scss'
 import Checkmark from '../../icons/Checkmark'
 
 import compose from 'ramda/src/compose'
-import {uncontrolled} from '@klarna/higher-order-components'
+import {uncontrolled, uniqueName} from '@klarna/higher-order-components'
 
 const baseClass = 'selector--options'
 
@@ -117,5 +117,6 @@ export default compose(
     defaultProp: 'defaultValue',
     handlerName: 'onChange',
     handlerSelector: (x) => x
-  })
+  }),
+  uniqueName
 )(Options)
diff --git a/Selector/example.jsx b/Selector/example.jsx
index df7c2a93..c3f9db20 100644
--- a/Selector/example.jsx
+++ b/Selector/example.jsx
@@ -27,7 +27,6 @@ export default {
           <Selector.Options
             data={optionsData}
             defaultValue={1}
-            name='selector'
             onChange={(value) => console.log('You selected', value)}
           />
         ),
@@ -36,7 +35,7 @@ export default {
           <Selector.Options
             data={optionsData}
             focus={2}
-            name='selector-controlled'
+            name='selector'
             onChange={(value) => console.log('You selected', value)}
             value={1}
           />
diff --git a/Showroom/examples/compositions/UncontrolledForm.jsx b/Showroom/examples/compositions/UncontrolledForm.jsx
index b44f916f..85db2aa0 100644
--- a/Showroom/examples/compositions/UncontrolledForm.jsx
+++ b/Showroom/examples/compositions/UncontrolledForm.jsx
@@ -36,7 +36,6 @@ const optionsWithContent = [
     description: 'Amet et consequetur',
     content: <div>
       <BoxSelector
-        name='inner-installments'
         onChange={(key) => console.log('You selected', key)}
         options={[{content: <div>Long one line text in div</div>, key: 'installments_3'}, {content: [<div key='1'>$64.17/mo.</div>, <div key='2'>array of elements</div>], key: 'installments_6'}]}
         value='installments_6'
@@ -57,7 +56,6 @@ const optionsWithContent = [
       <Subtitle>Choose your destiny</Subtitle>
 
       <Dropdown
-        name='ipsum-uncontrolled-dropdown-random-more-stuff'
         options={[
           {key: 'coffee', label: 'Coffee'},
           {key: 'chai', label: 'Chai'},
diff --git a/Switch/Checkbox/index.jsx b/Switch/Checkbox/index.jsx
index 63e0bda2..6102b7c6 100644
--- a/Switch/Checkbox/index.jsx
+++ b/Switch/Checkbox/index.jsx
@@ -6,7 +6,8 @@ import compose from 'ramda/src/compose'
 import {
   overridable,
   themeable,
-  uncontrolled
+  uncontrolled,
+  uniqueName
 } from '@klarna/higher-order-components'
 
 const baseClass = 'switch--checkbox'
@@ -189,5 +190,6 @@ export default compose(
       borderColorSelected: customizations.color_border_selected
     }
   })),
-  overridable(defaultStyles)
+  overridable(defaultStyles),
+  uniqueName
 )(Checkbox)
diff --git a/Switch/Toggle/index.jsx b/Switch/Toggle/index.jsx
index f5730b70..1e0b5a63 100644
--- a/Switch/Toggle/index.jsx
+++ b/Switch/Toggle/index.jsx
@@ -6,7 +6,8 @@ import compose from 'ramda/src/compose'
 import {
   overridable,
   themeable,
-  uncontrolled
+  uncontrolled,
+  uniqueName
 } from '@klarna/higher-order-components'
 
 const baseClass = 'switch'
@@ -263,5 +264,6 @@ export default compose(
       textColor: customizations.color_text
     }
   })),
-  overridable(defaultStyles)
+  overridable(defaultStyles),
+  uniqueName
 )(Toggle)
diff --git a/Switch/example.jsx b/Switch/example.jsx
index a5b0cb09..61356715 100644
--- a/Switch/example.jsx
+++ b/Switch/example.jsx
@@ -14,11 +14,11 @@ export default {
 
       examples: {
         Regular: [
-          <Switch.Toggle key={1} name='toggle-switch'>
+          <Switch.Toggle key={1}>
             This is a toggle switch
           </Switch.Toggle>,
 
-          <Switch.Toggle key={2} defaultValue name='toggle-switch-checked'>
+          <Switch.Toggle key={2} defaultValue>
             This is a toggle switch checked
           </Switch.Toggle>
         ],
@@ -27,44 +27,34 @@ export default {
           <Switch.Toggle
             key={1}
             focus
-            value={false}
-            name='toggle-switch-controlled'>
+            name='toggle'
+            value={false}>
             This is an controlled toggle switch checked
-          </Switch.Toggle>,
-
-          <Switch.Toggle
-            key={2}
-            align='right'
-            value
-            name='toggle-switch-controlled-right'>
-            This is an controlled toggle switch on the right
           </Switch.Toggle>
         ],
 
-        'With legal size text': <Switch.Toggle name='toggle-legal' legal>
+        'With legal size text': <Switch.Toggle legal>
           This is a toggle switch with legal size text that usually will fold into multiple lines
         </Switch.Toggle>,
 
         Disabled: [
-          <Switch.Toggle key={1} disabled name='toggle-switch-disabled'>
+          <Switch.Toggle key={1} disabled>
             This is a toggle switch disabled
           </Switch.Toggle>,
 
           <Switch.Toggle
-            key={2} disabled defaultValue
-            name='toggle-switch-disabled-checked'>
+            key={2} disabled defaultValue>
             This is a toggle switch checked and disabled
           </Switch.Toggle>
         ],
 
-        'With error': <Switch.Toggle error name='toggle-switch-error'>
+        'With error': <Switch.Toggle error>
           This is a toggle switch in an error state
         </Switch.Toggle>,
 
         'With customizations': [
           <Switch.Toggle
             key={1}
-            name='toggle-switch-dynamic-uncontrolled'
             customize={{
               backgroundColor: '#3500C8',
               bulletColor: '#F9FF3C',
@@ -76,7 +66,6 @@ export default {
           <Switch.Toggle
             key={2}
             align='right'
-            name='toggle-switch-dynamic-uncontrolled-right'
             customize={{
               backgroundColor: '#3500C8',
               bulletColor: '#F9FF3C',
@@ -95,37 +84,36 @@ export default {
 
       examples: {
         Regular: [
-          <Switch.Checkbox key={1} name='checkbox-unchecked'>
+          <Switch.Checkbox key={1}>
             This is a toggle switch with checkbox design
           </Switch.Checkbox>,
 
-          <Switch.Checkbox key={2} name='checkbox-checked' defaultValue>
+          <Switch.Checkbox key={2} defaultValue>
             This is a toggle switch with checkbox design
           </Switch.Checkbox>
         ],
 
         Controlled: [
-          <Switch.Checkbox key={1} name='checkbox-controlled' value focus>
+          <Switch.Checkbox key={1} name='checkbox' value focus>
             This is a controlled checkbox switch
           </Switch.Checkbox>
         ],
 
-        'With legal size text': <Switch.Checkbox name='checkbox-legal' legal>
+        'With legal size text': <Switch.Checkbox legal>
           This is a toggle switch with checkbox design and legal size text that usually will fold into multiple lines
         </Switch.Checkbox>,
 
-        Disabled: <Switch.Checkbox name='checkbox-disabled' disabled>
+        Disabled: <Switch.Checkbox disabled>
           Disabled checkbox
         </Switch.Checkbox>,
 
-        'With error': <Switch.Checkbox name='checkbox-error' error>
+        'With error': <Switch.Checkbox error>
           Checkbox with error
         </Switch.Checkbox>,
 
         'With customizations': [
           <Switch.Checkbox
             key={1}
-            name='checkbox-dynamic-styling'
             customize={{
               backgroundColor: '#3500C8',
               bulletColor: '#F9FF3C',
@@ -138,7 +126,6 @@ export default {
           <Switch.Checkbox
             key={2}
             align='right'
-            name='checkbox-dynamic-styling-right'
             customize={{
               backgroundColor: '#3500C8',
               bulletColor: '#F9FF3C',
diff --git a/Theme/example.jsx b/Theme/example.jsx
index f3f48ec1..4627dd19 100644
--- a/Theme/example.jsx
+++ b/Theme/example.jsx
@@ -40,7 +40,6 @@ const optionsWithContent = [
     description: 'Amet et consequetur',
     content: <div>
       <BoxSelector
-        name='installments'
         onChange={(key) => console.log('You selected', key)}
         options={[{content: <div>Long one line text in div</div>, key: 'installments_3'}, {content: [<div key='1'>$64.17/mo.</div>, <div key='2'>array of elements</div>], key: 'installments_6'}]}
         defaultValue='installments_6'
@@ -61,7 +60,6 @@ const optionsWithContent = [
       <Subtitle>Choose your destiny</Subtitle>
 
       <Dropdown
-        name='ipsum-controlled-dropdown'
         options={[
           {key: 'coffee', label: 'Coffee'},
           {key: 'chai', label: 'Chai'},
@@ -175,7 +173,6 @@ import * as List from '@klarna/ui/List'`,
         <div style={{padding: '20px 0'}}>
           <Radio
             onChange={(key) => console.log(key)}
-            name='radio-regular'
             options={optionsWithContent}
             defaultValue='lorem'
           />
@@ -196,7 +193,6 @@ import * as List from '@klarna/ui/List'`,
         <div style={{paddingBottom: '20px'}}>
           <BoxSelector
             onChange={(key) => console.log('You selected', key)}
-            name='box-selector'
             defaultValue='installments_24'
             options={[
               { key: 'installments_3', content: <div>Long one line text in div</div> },
@@ -212,19 +208,19 @@ import * as List from '@klarna/ui/List'`,
         </div>
 
         <div style={{paddingBottom: '20px'}}>
-          <Switch.Toggle name='fries-5'>
+          <Switch.Toggle>
             Would you like fries?
           </Switch.Toggle>
-          <Switch.Toggle defaultValue name='fries'>
+          <Switch.Toggle defaultValue>
             Would you like fries?
           </Switch.Toggle>
-          <Switch.Checkbox name='fries-2'>
+          <Switch.Checkbox>
             Would you like fries?
           </Switch.Checkbox>
-          <Switch.Checkbox defaultValue name='fries-3'>
+          <Switch.Checkbox defaultValue>
             Would you like fries?
           </Switch.Checkbox>
-          <Switch.Checkbox defaultValue error name='fries-4'>
+          <Switch.Checkbox defaultValue error>
             Should be red
           </Switch.Checkbox>
         </div>
diff --git a/package.json b/package.json
index fdecfc15..da524f3a 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
   },
   "author": "Klarna front end people",
   "dependencies": {
-    "@klarna/higher-order-components": "0.1.3",
+    "@klarna/higher-order-components": "0.2.2",
     "classnames": "2.2.5",
     "parse-color": "1.0.0",
     "react-context-props": "^0.1.4"
@@ -69,6 +69,7 @@
     "resolve-url-loader": "^1.2.0",
     "sass-lint": "^1.9.1",
     "sass-loader": "^3.2.0",
+    "seed-random": "^2.2.0",
     "sinon": "git+https://github.com/sinonjs/sinon.git",
     "standard": "^6.0.8",
     "stringify-object": "^2.4.0",
diff --git a/yarn.lock b/yarn.lock
index cf1e1f1e..e820ac0d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1,8 +1,10 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
-"@klarna/higher-order-components@0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@klarna/higher-order-components/-/higher-order-components-0.1.3.tgz#972f173847445bb5a7f45bde03a37bb508fb1b22"
+"@klarna/higher-order-components@0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@klarna/higher-order-components/-/higher-order-components-0.2.2.tgz#a11c4107dde5083b43bf83ee2b6185402a14c598"
+  dependencies:
+    seed-random "^2.2.0"
 
 abbrev@1, abbrev@1.0.x:
   version "1.0.9"
@@ -253,11 +255,11 @@ autoprefixer-loader@^3.1.0:
     postcss-safe-parser "^1.0.1"
 
 autoprefixer@^6.0.2, autoprefixer@^6.3.1, autoprefixer@^6.4.1:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.2.tgz#37cc910c5e1139ad341a006d5f6d441a380b742b"
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.3.tgz#2d853af66d04449fcf50db3066279ab54c3e4b01"
   dependencies:
     browserslist "~1.4.0"
-    caniuse-db "^1.0.30000576"
+    caniuse-db "^1.0.30000578"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
     postcss "^5.2.5"
@@ -1183,9 +1185,9 @@ camelcase@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
 
-caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000576:
-  version "1.0.30000578"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000578.tgz#fc4106bda3ca19df4bd9f35e491063f3d498ff31"
+caniuse-db@^1.0.30000539, caniuse-db@^1.0.30000578:
+  version "1.0.30000579"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000579.tgz#9018ef6f0ce61977525ae69c440e538e6ffccf35"
 
 caseless@~0.11.0:
   version "0.11.0"
@@ -1318,8 +1320,8 @@ collapse-white-space@^1.0.0:
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.2.tgz#9c463fb9c6d190d2dcae21a356a01bcae9eeef6d"
 
 color-convert@^1.3.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.6.0.tgz#7592755faf53938a05b1ea8e5374cab77d6dd190"
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.7.0.tgz#473bcddfa54b76a77a3d435aceccfbf3d99cbbb0"
   dependencies:
     color-name "^1.1.1"
 
@@ -2591,8 +2593,8 @@ globals@^8.18.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-8.18.0.tgz#93d4a62bdcac38cfafafc47d6b034768cb0ffcb4"
 
 globals@^9.0.0, globals@^9.2.0:
-  version "9.12.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-9.12.0.tgz#992ce90828c3a55fa8f16fada177adb64664cf9d"
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.13.0.tgz#d97706b61600d8dbe94708c367d3fdcf48470b8f"
 
 globby@^5.0.0:
   version "5.0.0"
@@ -4434,8 +4436,8 @@ postcss-safe-parser@^1.0.1:
     postcss "^5.0.18"
 
 postcss-selector-parser@^2.0.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.1.tgz#fdbf696103b12b0a64060e5610507f410491f7c8"
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.2.tgz#3d70f5adda130da51c7c0c2fc023f56b1374fe08"
   dependencies:
     flatten "^1.0.2"
     indexes-of "^1.0.1"
@@ -4692,9 +4694,9 @@ readable-stream@^1.0.27-1, readable-stream@^1.1.13:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@~2.1.4:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
+"readable-stream@^2.0.0 || ^1.1.13", readable-stream@^2.0.1, readable-stream@^2.0.2:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.1.tgz#c459a6687ad6195f936b959870776edef27a7655"
   dependencies:
     buffer-shims "^1.0.0"
     core-util-is "~1.0.0"
@@ -4724,6 +4726,18 @@ readable-stream@~2.0.0, readable-stream@~2.0.5:
     string_decoder "~0.10.x"
     util-deprecate "~1.0.1"
 
+readable-stream@~2.1.4:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.1.5.tgz#66fa8b720e1438b364681f2ad1a63c618448c9d0"
+  dependencies:
+    buffer-shims "^1.0.0"
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "~1.0.0"
+    process-nextick-args "~1.0.6"
+    string_decoder "~0.10.x"
+    util-deprecate "~1.0.1"
+
 readdirp@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
@@ -4763,8 +4777,8 @@ reduce-function-call@^1.0.1:
     balanced-match "~0.1.0"
 
 regenerate@^1.2.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.1.tgz#0300203a5d2fdcf89116dce84275d011f5903f33"
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
 
 regenerator-runtime@^0.9.5:
   version "0.9.6"
@@ -5055,6 +5069,10 @@ sax@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a"
 
+seed-random@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/seed-random/-/seed-random-2.2.0.tgz#2a9b19e250a817099231a5b99a4daf80b7fbed54"
+
 semver@~4.3.3:
   version "4.3.6"
   resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
@@ -5145,8 +5163,8 @@ signal-exit@^3.0.0:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.1.tgz#5a4c884992b63a7acd9badb7894c3ee9cfccad81"
 
 "sinon@git+https://github.com/sinonjs/sinon.git":
-  version "2.0.0-pre.3"
-  resolved "git+https://github.com/sinonjs/sinon.git#35fe7d815c373393ab6f9f73edfa6455ec09b7a0"
+  version "2.0.0-pre.4"
+  resolved "git+https://github.com/sinonjs/sinon.git#9622a73b060cc817bafafe8b4fe2c18486477dd0"
   dependencies:
     formatio "1.1.1"
     lolex "^1.4.0"