diff --git a/src/scss/cdb-components/forms/color_bar.scss b/src/scss/cdb-components/forms/color_bar.scss
new file mode 100644
index 0000000..6c2efc6
--- /dev/null
+++ b/src/scss/cdb-components/forms/color_bar.scss
@@ -0,0 +1,116 @@
+// Color input styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Color bar
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-utilities/mixins';
+
+.CDB-ColorBarContainer {
+ @include display-flex();
+ @include flex-direction(row);
+ width: 100%;
+}
+.CDB-ColorBar {
+ position: relative;
+ width: 100%;
+ height: $baseSize - 2;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: $baseSize - 2;
+ box-sizing: border-box;
+
+ &:last-child {
+ margin-right: 0;
+ }
+}
+.CDB-ColorBar-gradient {
+ border: 0;
+
+ &::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ border-radius: $baseSize - 2;
+ content: '';
+ }
+}
+.CDB-ColorBar.CDB-ColorBar--spaceMedium {
+ margin-right: $baseSize / 2;
+
+ &:last-child {
+ margin-right: 0;
+ }
+}
+.CDB-ColorBar.CDB-ColorBar--spaceless {
+ border-width: 1px 0;
+ border-radius: 0;
+}
+.CDB-ColorBar.CDB-ColorBar--spaceless:first-child {
+ border-width: 1px 0 1px 1px;
+ border-radius: $baseSize - 2 0 0 $baseSize - 2;
+}
+.CDB-ColorBar.CDB-ColorBar--spaceless:last-child {
+ border-width: 1px 1px 1px 0;
+ border-radius: 0 $baseSize - 2 $baseSize - 2 0;
+}
+.CDB-ColorBar.CDB-ColorBar--spaceSmall {
+ margin-right: 2px;
+ border-radius: 2px;
+}
+.CDB-ColorBar.CDB-ColorBar--spaceSmall:first-child {
+ border-radius: $baseSize - 2 3px 3px $baseSize - 2;
+}
+.CDB-ColorBar.CDB-ColorBar--spaceSmall:last-child {
+ margin-right: 0;
+ border-radius: 3px $baseSize - 2 $baseSize - 2 3px;
+}
diff --git a/src/scss/cdb-components/forms/option_input.scss b/src/scss/cdb-components/forms/option_input.scss
new file mode 100644
index 0000000..b56f6ad
--- /dev/null
+++ b/src/scss/cdb-components/forms/option_input.scss
@@ -0,0 +1,146 @@
+// Color input styles
+// ----------------------------------------------
+
+/* SG
+# Forms/Option input
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+*/
+
+@import '../../cdb-variables/sizes';
+@import '../../cdb-variables/colors';
+@import '../../cdb-utilities/mixins';
+
+.CDB-OptionInput {
+ width: 100%;
+ height: $baseSize * 4;
+ border: 1px solid $cMainLine;
+ border-radius: $baseSize / 2;
+ box-sizing: border-box;
+ vertical-align: middle;
+
+ &:hover {
+ border: 1px solid $cHoverLine;
+ }
+ &:focus {
+ border: 1px solid $cBlue;
+ }
+}
+.CDB-OptionInput.is-active {
+ border: 1px solid $cBlue;
+}
+.CDB-OptionInput-container {
+ @include display-flex();
+ @include align-content(center);
+ @include align-items(center);
+ margin: 0 $baseSize;
+}
+.CDB-OptionInput-item {
+ @include display-flex();
+ @include align-items(center);
+ @include align-content(center);
+ width: auto;
+ height: 100%;
+ font-size: $sFontSize-medium;
+ box-sizing: content-box;
+
+ &::after {
+ padding: 0 $baseSize - 2;
+ color: $cHintText;
+ content: 'ยท';
+ }
+ &:last-child {
+ width: 100%;
+
+ &::after {
+ display: none;
+ }
+ }
+}
+.CDB-OptionInput-content {
+ @include display-flex();
+ @include align-items(center);
+ height: 100%;
+ color: $cMainBg;
+ box-sizing: content-box;
+ white-space: nowrap;
+
+ &:hover {
+ text-decoration: none;
+ }
+}
+.CDB-OptionInput-item.is-active > .CDB-OptionInput-content {
+ border-bottom: 1px solid $cMainBg;
+}