diff --git a/Installments/example.jsx b/BoxSelector/example.jsx
similarity index 83%
rename from Installments/example.jsx
rename to BoxSelector/example.jsx
index a4244081..03e1a0b4 100644
--- a/Installments/example.jsx
+++ b/BoxSelector/example.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Installments from '../Installments'
+import BoxSelector from '../BoxSelector'
 import { LIVE_WIDE } from '../Showroom/variationTypes'
 
 const options = [
@@ -10,15 +10,15 @@ const options = [
 ]
 
 export default {
-  title: 'Installments',
+  title: 'BoxSelector',
 
   examples: {
-    require: 'import Installments from \'@klarna/ui/Installments\'',
+    require: 'import BoxSelector from \'@klarna/ui/BoxSelector\'',
     type: LIVE_WIDE,
 
     examples: {
       Regular: (
-        <Installments
+        <BoxSelector
           onChange={(key) => console.log('You selected', key)}
           name='installments'
           defaultValue='installments_12'
@@ -27,7 +27,7 @@ export default {
       ),
 
       Controlled: (
-        <Installments
+        <BoxSelector
           onChange={(key) => console.log('You selected', key)}
           name='installments2'
           value='installments_24'
diff --git a/Installments/index.jsx b/BoxSelector/index.jsx
similarity index 98%
rename from Installments/index.jsx
rename to BoxSelector/index.jsx
index 8d5c7a36..c36f5537 100644
--- a/Installments/index.jsx
+++ b/BoxSelector/index.jsx
@@ -10,7 +10,7 @@ import {
   uncontrolled
 } from '@klarna/higher-order-components'
 
-const baseClass = 'installments'
+const baseClass = 'box-selector'
 const TRANSITION_DURATION = 500
 
 const classes = {
@@ -49,8 +49,8 @@ const calculateHighlightPosition = (selected) => {
   }
 }
 
-const Installments = React.createClass({
-  displayName: 'Installments',
+const BoxSelector = React.createClass({
+  displayName: 'BoxSelector',
 
   propTypes: {
     options: PropTypes.arrayOf(PropTypes.shape({
@@ -311,4 +311,4 @@ export default compose(
     }
   })),
   overridable(defaultStyles)
-)(Installments)
+)(BoxSelector)
diff --git a/Installments/styles.scss b/BoxSelector/styles.scss
similarity index 92%
rename from Installments/styles.scss
rename to BoxSelector/styles.scss
index e2f0e83c..f0364802 100644
--- a/Installments/styles.scss
+++ b/BoxSelector/styles.scss
@@ -4,7 +4,7 @@
 $transition-duration: 500ms;
 $highlightTransitionEasing: cubic-bezier(.31,.09,.24,1);
 
-.installments {
+.box-selector {
   border: ($grid * .2) solid $border-color;
   border-radius: 5px;
   box-sizing: border-box;
@@ -24,7 +24,7 @@ $highlightTransitionEasing: cubic-bezier(.31,.09,.24,1);
     table-layout: fixed;
   }
 
-  .installments__input {
+  .box-selector__input {
     display: block;
     height: 0;
     opacity: 0;
@@ -32,7 +32,7 @@ $highlightTransitionEasing: cubic-bezier(.31,.09,.24,1);
     width: 0;
   }
 
-  .installments__row {
+  .box-selector__row {
     display: block;
 
     @include respond-to-wide {
@@ -40,7 +40,7 @@ $highlightTransitionEasing: cubic-bezier(.31,.09,.24,1);
     }
   }
 
-  .installments__cell {
+  .box-selector__cell {
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     border-top: ($grid * .2) solid $border-color;
     box-sizing: border-box;
@@ -76,7 +76,7 @@ $highlightTransitionEasing: cubic-bezier(.31,.09,.24,1);
     }
   }
 
-  .installments__cell__content {
+  .box-selector__cell__content {
     @include typography(map-get($font-sizes, big-body-mobile), semi-bold);
 
     -webkit-tap-highlight-color: rgba(0,0,0,0);
@@ -93,8 +93,8 @@ $highlightTransitionEasing: cubic-bezier(.31,.09,.24,1);
     }
   }
 
-  .installments__cell.is-hovered,
-  .installments__cell.is-focused {
+  .box-selector__cell.is-hovered,
+  .box-selector__cell.is-focused {
     color: map-get($colors, klarna-blue);
   }
 
@@ -106,7 +106,7 @@ $highlightTransitionEasing: cubic-bezier(.31,.09,.24,1);
     }
   }
 
-  .installments__cell__highlight {
+  .box-selector__cell__highlight {
     border: ($grid * .4) solid map-get($colors, klarna-blue);
     border-radius: 5px;
     box-sizing: border-box;
diff --git a/Radio/example.jsx b/Radio/example.jsx
index 8b9297c6..2deab313 100644
--- a/Radio/example.jsx
+++ b/Radio/example.jsx
@@ -3,7 +3,7 @@ import Radio from '../Radio'
 import * as Checklist from '../Checklist'
 import * as Paragraph from '../Paragraph'
 import { LIVE_WIDE } from '../Showroom/variationTypes'
-import Installments from '../Installments'
+import BoxSelector from '../BoxSelector'
 import Dropdown from '../Dropdown'
 import Subtitle from '../Subtitle'
 
@@ -37,7 +37,7 @@ const optionsWithContent = [
     label: 'Sit',
     description: 'Amet et consequetur',
     content: <div>
-      <Installments
+      <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'}]}
diff --git a/Showroom/examples/components.js b/Showroom/examples/components.js
index b5cc392b..1d317005 100644
--- a/Showroom/examples/components.js
+++ b/Showroom/examples/components.js
@@ -1,5 +1,6 @@
 export Alert from '../../Alert/example'
 export Block from '../../Block/example'
+export BoxSelector from '../../BoxSelector/example'
 export Button from '../../Button/example'
 export Checklist from '../../Checklist/example'
 export ContextMenu from '../../ContextMenu/example'
@@ -9,7 +10,6 @@ export Field from '../../Field/example'
 export Fieldset from '../../Fieldset/example'
 export Icons from '../../icons/example'
 export Input from '../../Input/example'
-export Installments from '../../Installments/example'
 export Label from '../../Label/example'
 export List from '../../List/example'
 export Loader from '../../Loader/example'
diff --git a/Showroom/examples/compositions/UncontrolledForm.jsx b/Showroom/examples/compositions/UncontrolledForm.jsx
index 48034649..b44f916f 100644
--- a/Showroom/examples/compositions/UncontrolledForm.jsx
+++ b/Showroom/examples/compositions/UncontrolledForm.jsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import BoxSelector from '../../../BoxSelector'
 import Fieldset from '../../../Fieldset'
 import Dropdown from '../../../Dropdown'
 import Field from '../../../Field'
@@ -6,7 +7,6 @@ import * as Switch from '../../../Switch'
 import * as Button from '../../../Button'
 import * as Selector from '../../../Selector'
 import * as Menu from '../../../Menu'
-import Installments from '../../../Installments'
 import Radio from '../../../Radio'
 import Subtitle from '../../../Subtitle'
 import * as Paragraph from '../../../Paragraph'
@@ -35,7 +35,7 @@ const optionsWithContent = [
     label: 'Sit',
     description: 'Amet et consequetur',
     content: <div>
-      <Installments
+      <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'}]}
@@ -150,7 +150,7 @@ export default {
 
         <Fieldset margins>
           <Subtitle>How many installments do you want to have?</Subtitle>
-          <Installments
+          <BoxSelector
             name='installments'
             options={[
               {
diff --git a/Theme/example.jsx b/Theme/example.jsx
index 68d0addc..f3f48ec1 100644
--- a/Theme/example.jsx
+++ b/Theme/example.jsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import Fieldset from '../Fieldset'
 import Theme from '../Theme'
+import BoxSelector from '../BoxSelector'
 import * as Button from '../Button'
 import * as Checklist from '../Checklist'
 import Dropdown from '../Dropdown'
 import Field from '../Field'
 import * as FieldVariant from '../Field'
-import Installments from '../Installments'
 import Link from '../Link'
 import * as Switch from '../Switch'
 import * as Title from '../Title'
@@ -39,7 +39,7 @@ const optionsWithContent = [
     label: 'Sit',
     description: 'Amet et consequetur',
     content: <div>
-      <Installments
+      <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'}]}
@@ -79,12 +79,12 @@ export default {
 
   examples: {
     require: `import Theme from '@klarna/ui/Theme'
+import BoxSelector from '@klarna/ui/BoxSelector'
 import * as Button from '@klarna/ui/Button'
 import * as Checklist from '@klarna/ui/Checklist'
 import Dropdown from '@klarna/ui/Dropdown'
 import * as Field from '@klarna/ui/Field'
 import Field from '@klarna/ui/Field'
-import Installments from '@klarna/ui/Installments'
 import Link from '@klarna/ui/Link'
 import * as Switch from '@klarna/ui/Switch'
 import * as Title from '@klarna/ui/Title'
@@ -194,9 +194,9 @@ import * as List from '@klarna/ui/List'`,
         </Fieldset>
 
         <div style={{paddingBottom: '20px'}}>
-          <Installments
+          <BoxSelector
             onChange={(key) => console.log('You selected', key)}
-            name='installments'
+            name='box-selector'
             defaultValue='installments_24'
             options={[
               { key: 'installments_3', content: <div>Long one line text in div</div> },
diff --git a/index.js b/index.js
index 06bfbe66..01ad6cdc 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,7 @@
 import * as TheAlert from './Alert'
 export { default as Amount } from './Amount'
 import * as TheBlock from './Block'
+export { default as BoxSelector } from './BoxSelector'
 import * as TheButton from './Button'
 import * as TheChecklist from './Checklist'
 import * as TheContextMenu from './ContextMenu'
@@ -11,7 +12,6 @@ export { default as Fieldset } from './Fieldset'
 import * as TheIconButton from './IconButton'
 import * as TheIcons from './icons'
 export { default as Input } from './Input'
-export { default as Installments } from './Installments'
 export { default as Label } from './Label'
 export { default as Link } from './Link'
 export { default as Loader } from './Loader'