diff --git a/contents/_includes/patterns/radio-switch.njk b/contents/_includes/patterns/radio-switch.njk
new file mode 100644
index 0000000..d317213
--- /dev/null
+++ b/contents/_includes/patterns/radio-switch.njk
@@ -0,0 +1,8 @@
+
+
+
+
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index 5f4b27f..0820664 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -92,6 +92,7 @@ eleventyExcludeFromCollections: true
{% pattern "Custom checkbox button" %}{% include "patterns/custom-checkbox-button.njk" %}{% endpattern %}
{% pattern "Custom radio button" %}{% include "patterns/custom-radio-button.njk" %}{% endpattern %}
{% pattern "Input addon" %}{% include "patterns/input-addon.njk" %}{% endpattern %}
+ {% pattern "Radio switch" %}{% include "patterns/radio-switch.njk" %}{% endpattern %}
diff --git a/contents/radio-switch.md b/contents/radio-switch.md
new file mode 100644
index 0000000..4c04ded
--- /dev/null
+++ b/contents/radio-switch.md
@@ -0,0 +1,52 @@
+---
+layout: layouts/post.njk
+title: Radio switch
+description: Create a radio switch with CSS flexbox
+keywords: css flexbox, css radio switch, css switch
+---
+
+## HTML
+
+```html
+
+
+
+
+
+ ...
+
+```
+
+## CSS
+
+```css
+.radio-switch {
+ background-color: #d1d5db;
+ border-radius: 9999px;
+ display: inline-flex;
+ padding: 0.25rem;
+}
+
+.radio-switch__label {
+ border-radius: 9999px;
+ cursor: pointer;
+ padding: 0.25rem 0.5rem;
+}
+
+.radio-switch__label--selected {
+ /* For selected radio only */
+ background-color: #3b82f6;
+ color: #fff;
+}
+
+.radio-switch__input {
+ display: none;
+}
+```
+
+{% demo %}{% include "patterns/radio-switch.njk" %}{% enddemo %}
diff --git a/pages/radio-switch/index.tsx b/pages/radio-switch/index.tsx
deleted file mode 100644
index 1c50c8c..0000000
--- a/pages/radio-switch/index.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-import { Heading, 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 [isFirstChecked, setFirstChecked] = React.useState(false);
- const toggle = () => setFirstChecked((c) => !c);
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
- ...
-
-`}
- css={`
- .container {
- background-color: rgba(0, 0, 0, 0.1);
- border-radius: 9999px;
- display: inline-flex;
- padding: 4px;
- }
-
- .container__label {
- border-radius: 9999px;
- cursor: pointer;
- padding: 4px 8px;
- }
-
- .container__label--selected {
- /* For selected radio only */
- background-color: #357edd;
- color: #fff;
- }
-
- .container__input {
- display: none;
- }
- `}
- >
-
-
-
-
-
-
-
-
- );
-};
-
-export default Details;
diff --git a/patterns/radio-switch/Cover.tsx b/patterns/radio-switch/Cover.tsx
deleted file mode 100644
index f683265..0000000
--- a/patterns/radio-switch/Cover.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Cover: React.FC<{}> = () => {
- return (
-
-
-
- );
-};
-
-export default Cover;
diff --git a/styles/blocks/_pattern.scss b/styles/blocks/_pattern.scss
index 014270e..c7ec0cb 100644
--- a/styles/blocks/_pattern.scss
+++ b/styles/blocks/_pattern.scss
@@ -5,7 +5,6 @@
text-align: center;
}
.pattern__link {
- color: #6366f1;
text-align: center;
text-decoration: none;
}
@@ -18,11 +17,13 @@
pointer-events: none;
+ color: #000;
height: 8rem;
width: 100%;
margin-bottom: 0.5rem;
}
.pattern__title {
+ color: #6366f1;
font-size: 1.25rem;
font-weight: 500;
}
\ No newline at end of file
diff --git a/styles/index.scss b/styles/index.scss
index 5af2e66..1c12827 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -58,6 +58,7 @@
@import './patterns/property-list';
@import './patterns/questions-and-answers';
@import './patterns/radial-progress-bar';
+@import './patterns/radio-switch';
@import './patterns/resizable-element';
@import './patterns/ribbon';
@import './patterns/separator';
diff --git a/styles/patterns/_radio-switch.scss b/styles/patterns/_radio-switch.scss
new file mode 100644
index 0000000..1e2cf70
--- /dev/null
+++ b/styles/patterns/_radio-switch.scss
@@ -0,0 +1,22 @@
+.radio-switch {
+ background-color: #d1d5db;
+ border-radius: 9999px;
+ display: inline-flex;
+ padding: 0.25rem;
+}
+
+.radio-switch__label {
+ border-radius: 9999px;
+ cursor: pointer;
+ padding: 0.25rem 0.5rem;
+}
+
+.radio-switch__label--selected {
+ /* For selected radio only */
+ background-color: #3b82f6;
+ color: #fff;
+}
+
+.radio-switch__input {
+ display: none;
+}
\ No newline at end of file