diff --git a/contents/_includes/patterns/stepper-input.njk b/contents/_includes/patterns/stepper-input.njk
new file mode 100644
index 0000000..5c3e114
--- /dev/null
+++ b/contents/_includes/patterns/stepper-input.njk
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index f15a73a..ef5f7be 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -97,6 +97,7 @@ eleventyExcludeFromCollections: true
{% pattern "Search box" %}{% include "patterns/search-box.njk" %}{% endpattern %}
{% pattern "Slider" %}{% include "patterns/slider.njk" %}{% endpattern %}
{% pattern "Spin button" %}{% include "patterns/spin-button.njk" %}{% endpattern %}
+ {% pattern "Stepper input" %}{% include "patterns/stepper-input.njk" %}{% endpattern %}
diff --git a/contents/stepper-input.md b/contents/stepper-input.md
new file mode 100644
index 0000000..4ffd19f
--- /dev/null
+++ b/contents/stepper-input.md
@@ -0,0 +1,67 @@
+---
+layout: layouts/post.njk
+title: Stepper input
+description: Create a stepper input with CSS flexbox
+keywords: css flexbox, css stepper input
+---
+
+## HTML
+
+```html
+
+```
+
+## CSS
+
+```css
+.stepper-input {
+ display: flex;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+
+ /* Size */
+ height: 2rem;
+}
+
+.stepper-input__button {
+ /* Reset */
+ background: #d1d5db;
+ border: none;
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Size */
+ width: 2rem;
+}
+
+.stepper-input__content {
+ flex: 1;
+}
+
+.stepper-input__input {
+ /* Reset */
+ border: none;
+
+ /* Take full size of its container */
+ height: 100%;
+ width: 100%;
+}
+```
+
+{% demo %}{% include "patterns/stepper-input.njk" %}{% enddemo %}
diff --git a/pages/stepper-input/index.tsx b/pages/stepper-input/index.tsx
deleted file mode 100644
index c2e7fbc..0000000
--- a/pages/stepper-input/index.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Spacer } from '@1milligram/design';
-
-import { RelatedPatterns } from '../../components/RelatedPatterns';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
- const [value, setValue] = React.useState(0);
- const decrease = () => setValue(value - 1);
- const increase = () => setValue(value + 1);
- const change = (e: React.ChangeEvent) => {
- const v = parseInt(e.target.value, 10);
- const newValue = isNaN(v) ? 0 : v;
- setValue(newValue);
- };
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`}
- css={`
- .stepper {
- display: flex;
-
- /* Border */
- border: 1px solid #d1d5db;
-
- /* Size */
- height: 32px;
- width: 128px;
- }
-
- .stepper__button {
- /* Center the content */
- align-items: center;
- display: flex;
- justify-content: center;
-
- /* Size */
- width: 32px;
- }
-
- .stepper__content {
- flex: 1;
- }
-
- .stepper__input {
- /* Take full size of its container */
- height: 100%;
- width: 100%;
- }
- `}
- >
-
-
-
-
-
- );
-};
-
-export default Details;
diff --git a/patterns/stepper-input/Cover.tsx b/patterns/stepper-input/Cover.tsx
deleted file mode 100644
index 0f615b9..0000000
--- a/patterns/stepper-input/Cover.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-
-const Cover: React.FC<{}> = () => {
- return (
-
-
-
- );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 4509491..5c2ad7e 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -70,6 +70,7 @@
@import './patterns/stamp-border';
@import './patterns/statistic';
@import './patterns/status-light';
+@import './patterns/stepper-input';
@import './patterns/sticky-table-column';
@import './patterns/sticky-table-headers';
@import './patterns/teardrop';
diff --git a/styles/patterns/_stepper-input.scss b/styles/patterns/_stepper-input.scss
new file mode 100644
index 0000000..a075b38
--- /dev/null
+++ b/styles/patterns/_stepper-input.scss
@@ -0,0 +1,38 @@
+.stepper-input {
+ display: flex;
+
+ /* Border */
+ border: 1px solid #d1d5db;
+ border-radius: 0.25rem;
+
+ /* Size */
+ height: 2rem;
+ width: 8rem;
+}
+
+.stepper-input__button {
+ /* Reset */
+ background: #d1d5db;
+ border: none;
+
+ /* Center the content */
+ align-items: center;
+ display: flex;
+ justify-content: center;
+
+ /* Size */
+ width: 2rem;
+}
+
+.stepper-input__content {
+ flex: 1;
+}
+
+.stepper-input__input {
+ /* Reset */
+ border: none;
+
+ /* Take full size of its container */
+ height: 100%;
+ width: 100%;
+}
\ No newline at end of file