diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss
index 76dd2c7..1b2ab1c 100644
--- a/src/scss/cdb-components/forms/color_bar.scss
+++ b/src/scss/cdb-components/forms/color_bar.scss
@@ -5,40 +5,40 @@
 # Forms/Color bar
 
 ```
-<div class="CDB-ColorBarContainer u-bSpace--xl">
-  <span class="CDB-ColorBar u-rSpace" style="background-color: #9DE0AD;"></span>
-  <span class="CDB-ColorBar u-rSpace" style="background-color: #50E3C2;"></span>
-  <span class="CDB-ColorBar u-rSpace" style="background-color: #FFFFC0;"></span>
-  <span class="CDB-ColorBar u-rSpace" style="background-color: #7ED321;"></span>
-  <span class="CDB-ColorBar u-rSpace" style="background-color: #BD10E0;"></span>
-  <span class="CDB-ColorBar u-rSpace" style="background-color: #F15743;"></span>
-</div>
+<ul class="CDB-ColorBarContainer u-bSpace--xl">
+  <li class="CDB-ColorBar u-rSpace" style="background-color: #9DE0AD;"></li>
+  <li class="CDB-ColorBar u-rSpace" style="background-color: #50E3C2;"></li>
+  <li class="CDB-ColorBar u-rSpace" style="background-color: #FFFFC0;"></li>
+  <li class="CDB-ColorBar u-rSpace" style="background-color: #7ED321;"></li>
+  <li class="CDB-ColorBar u-rSpace" style="background-color: #BD10E0;"></li>
+  <li class="CDB-ColorBar u-rSpace" style="background-color: #F15743;"></li>
+</ul>
 
-<div class="CDB-ColorBarContainer u-bSpace--xl">
-  <span class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #9DE0AD;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #50E3C2;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #FFFFC0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #7ED321;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #BD10E0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #F15743;"></span>
-</div>
+<ul class="CDB-ColorBarContainer u-bSpace--xl">
+  <li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #9DE0AD;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #50E3C2;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #FFFFC0;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #7ED321;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #BD10E0;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--uBorder u-rSpace--s" style="background-color: #F15743;"></li>
+</ul>
 
-<div class="CDB-ColorBarContainer u-bSpace--xl">
-  <span class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #50E3C2;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #7ED321;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #BD10E0;"></span>
-  <span class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #F15743;"></span>
-</div>
+<ul class="CDB-ColorBarContainer u-bSpace--xl">
+  <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #50E3C2;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #7ED321;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #BD10E0;"></li>
+  <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #F15743;"></li>
+</ul>
 
-<div class="CDB-ColorBarContainer u-bSpace--xl">
-  <span class="CDB-ColorBar" style="background-color: #9DE0AD;"></span>
-</div>
+<ul class="CDB-ColorBarContainer u-bSpace--xl">
+  <li class="CDB-ColorBar" style="background-color: #9DE0AD;"></li>
+</ul>
 
-<div class="CDB-ColorBarContainer u-bSpace--xl">
-  <span class="CDB-ColorBar" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></span>
-</div>
+<ul class="CDB-ColorBarContainer u-bSpace--xl">
+  <li class="CDB-ColorBar" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li>
+</ul>
  ```
 */
 
@@ -47,6 +47,7 @@
 .CDB-ColorBarContainer {
   @include display-flex();
   @include flex-direction(row);
+  width: 100%;
   max-width: 215px;
 }
 .CDB-ColorBar {
diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss
index ca2e43a..4cc8d86 100644
--- a/src/scss/cdb-components/forms/option_input.scss
+++ b/src/scss/cdb-components/forms/option_input.scss
@@ -5,15 +5,46 @@
 # Forms/Option input
 
 ```
-<fieldset>
-  <label class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">OPTION</label>
-  <div class="u-iBlock">
-    <div class="CDB-OptionInput">
-      <span class="CDB-ColorBar" style="background-color: #207EBA;"></span>
-    </div>
+<div class="CDB-OptionInput is-active u-bSpace--xl">
+  <div class="CDB-OptionInput-element CDB-Text">
+    <span class="CDB-OptionInput--text is-active">8px</span>
   </div>
-</fieldset>
- ```
+
+  <div class="CDB-OptionInput-element CDB-Text">
+    <span class="CDB-OptionInput--text">solid</span>
+  </div>
+  
+  <ul class="CDB-ColorBarContainer CDB-Text CDB-Size-medium">
+    <li class="CDB-ColorBar" style="background-color: #207EBA;"></li>
+  </ul>
+</div>
+
+<div class="CDB-OptionInput u-bSpace--xl">
+  <ul class="CDB-ColorBarContainer">
+    <li class="CDB-ColorBar" style="background: linear-gradient(90deg, #FFFECA, #9FDAB3, #36B6C5, #207EBA, #203196);"></li>
+  </ul>
+</div>
+
+<div class="CDB-OptionInput u-bSpace--xl">
+  <ul class="CDB-ColorBarContainer">
+    <li class="CDB-ColorBar u-rSpace" style="background-color: #9DE0AD;"></li>
+    <li class="CDB-ColorBar u-rSpace" style="background-color: #50E3C2;"></li>
+    <li class="CDB-ColorBar u-rSpace" style="background-color: #FFFFC0;"></li>
+    <li class="CDB-ColorBar u-rSpace" style="background-color: #7ED321;"></li>
+    <li class="CDB-ColorBar u-rSpace" style="background-color: #BD10E0;"></li>
+    <li class="CDB-ColorBar u-rSpace" style="background-color: #F15743;"></li>
+  </ul>
+</div>
+
+<div class="CDB-OptionInput u-bSpace--xl">
+  <ul class="CDB-ColorBarContainer">
+    <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #9DE0AD;"></li>
+    <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #50E3C2;"></li>
+    <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #FFFFC0;"></li>
+    <li class="CDB-ColorBar CDB-ColorBar--compacted" style="background-color: #7ED321;"></li>
+  </ul>
+</div>
+```
 */
 
 @import '../../cdb-variables/sizes';
@@ -23,6 +54,7 @@
 .CDB-OptionInput {
   @include display-flex();
   @include align-items(center);
+  @include align-content(center);
   width: $baseSize * 20;
   height: $baseSize * 4;
   padding: $baseSize;
@@ -41,3 +73,28 @@
 .CDB-OptionInput.is-active {
   border: 1px solid $cBlue;
 }
+.CDB-OptionInput-element {
+  @include display-flex();
+  @include align-content(center);
+  color: $cMainBg;
+  font-size: $sFontSize-medium;
+  box-sizing: content-box;
+
+  &::after {
+    content: "·";
+    color: $cHintText;
+    padding: 9px;
+  }
+  &:last-child {
+    &::after {
+      content: "";
+      padding: 0;
+    }
+  }
+}
+.CDB-OptionInput--text {
+  padding: 9px 0;
+}
+.CDB-OptionInput--text.is-active {
+  border-bottom: 1px solid $cMainBg;
+}