diff --git a/css/mistica-common.css b/css/mistica-common.css
index 592e7ae77b..da30059ce4 100644
--- a/css/mistica-common.css
+++ b/css/mistica-common.css
@@ -38,6 +38,11 @@
     --vcolor-accordionActive: var(--mistica-color-backgroundContainerBrandPressed);
 
     --vcolor-divider: var(--mistica-color-dividerInverse);
+
+    --vcolor-control: var(--mistica-color-controlInverse);
+    --vcolor-controlActivated: var(--mistica-color-controlActivatedInverse);
+    --vcolor-checkbox-tick: var(--mistica-color-controlKnobInverse);
+    --vcolor-checkbox-background: transparent;
 }
 
 [data-mistica-skin] > *,
@@ -82,6 +87,11 @@
     --vcolor-accordionActive: var(--mistica-color-backgroundContainerPressed);
 
     --vcolor-divider: var(--mistica-color-divider);
+
+    --vcolor-control: var(--mistica-color-control);
+    --vcolor-controlActivated: var(--mistica-color-controlActivated);
+    --vcolor-checkbox-tick: var(--mistica-color-inverse);
+    --vcolor-checkbox-background: var(--mistica-color-background);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -1164,3 +1174,71 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
         margin-top: 24px;
     }
 }
+
+/* Checkbox */
+.mistica-checkbox {
+    appearance: none;
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    user-select: none;
+    vertical-align: middle;
+    width: 18px;
+    height: 18px;
+    margin: 0;
+    border-radius: var(--mistica-border-radius-checkbox);
+    background: var(--vcolor-checkbox-background);
+    box-shadow: inset 0 0 0 2px var(--vcolor-control);
+    cursor: pointer;
+    transition: box-shadow 0.3s;
+}
+
+.mistica-checkbox:not(:focus-visible) {
+    outline: 1px solid transparent;
+}
+
+.mistica-checkbox:checked {
+    box-shadow: inset 0 0 0 12px var(--vcolor-controlActivated);
+}
+
+.mistica-checkbox:disabled {
+    cursor: default;
+    opacity: 0.5;
+}
+
+.mistica-checkbox:before {
+    content: '';
+    width: 12px;
+    height: 7px;
+    border-bottom: 2px solid var(--vcolor-checkbox-tick);
+    border-left: 2px solid var(--vcolor-checkbox-tick);
+    transform: scale(0) rotate(-45deg) translate(1.5px, -1.5px);
+    transform-origin: center;
+    transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
+}
+
+.mistica-checkbox:checked:before {
+    transform: scale(1) rotate(-45deg) translate(1.5px, -1.5px);
+}
+
+.mistica-checkbox-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 16px;
+    color: var(--vcolor-textPrimary);
+    font-size: var(--mistica-font-size-3);
+    line-height: var(--mistica-line-height-3);
+    font-weight: var(--mistica-font-weight-3);
+    cursor: pointer;
+}
+
+.mistica-checkbox-label:has(.mistica-checkbox:disabled) {
+    cursor: default;
+    opacity: 0.5;
+}
+
+.mistica-checkbox-label:has(.mistica-checkbox:disabled) > .mistica-checkbox {
+    opacity: initial; /* avoid applying 0.5 opacity twice */
+}
diff --git a/examples/css/index.html b/examples/css/index.html
index a4cb3031b3..2a06a91398 100644
--- a/examples/css/index.html
+++ b/examples/css/index.html
@@ -83,6 +83,18 @@ <h3 class="mistica-text-title2">Tag</h3>
                     <div class="mistica-tag-error">Error</div>
                 </div>
 
+                <h3 class="mistica-text-title2">Checkbox</h3>
+                <h4 class="mistica-text-title1">Without label</h4>
+                <input type="checkbox" class="mistica-checkbox" />
+                <h4 class="mistica-text-title1">With label</h4>
+                <label class="mistica-checkbox-label"
+                    ><input type="checkbox" class="mistica-checkbox" />some label</label
+                >
+                <h4 class="mistica-text-title1">Disabled</h4>
+                <label class="mistica-checkbox-label"
+                    ><input disabled checked type="checkbox" class="mistica-checkbox" />some label</label
+                >
+
                 <h3 class="mistica-text-title2">Table</h3>
                 <h4 class="mistica-text-title1">Column headings</h4>
                 <table class="mistica-table mistica-table-mobile-collapsed">
@@ -438,11 +450,25 @@ <h3 class="mistica-text-title2">Cards</h3>
                 <h4 class="mistica-text-title1">MediaCard / DataCard / SnapCard</h4>
                 <div class="cards-group">
                     <section class="mistica-card">
-                        <div class="mistica-card__asset-floating" style="border-radius: 50%; height:40px; width: 40px; background: var(--mistica-color-tagBackgroundActive)"> 
+                        <div
+                            class="mistica-card__asset-floating"
+                            style="
+                                border-radius: 50%;
+                                height: 40px;
+                                width: 40px;
+                                background: var(--mistica-color-tagBackgroundActive);
+                            "
+                        >
                             <svg width="24" height="24" viewBox="0 0 24 24" role="presentation">
-                                <path 
-                                    fill="var(--mistica-color-tagTextActive)" 
-                                    d="M11.39 19.862q.18.05.388.05c.353 0 .653-.112.85-.315q.297-.305.298-.835c0-.72-.425-1.15-1.145-1.15s-1.148.43-1.148 1.15q0 .526.298.835.184.188.46.265"></path><path fill="var(--mistica-color-tagTextActive)" d="M8.396 22.32c-1.141 0-1.974-.275-2.543-.838-.575-.57-.853-1.408-.853-2.558V5.396c0-1.121.278-1.945.85-2.526C6.428 2.286 7.26 2 8.396 2h6.764c1.145 0 1.977.277 2.55.853.572.575.846 1.404.846 2.543v13.528c0 1.15-.28 1.988-.852 2.558-.573.563-1.402.838-2.544.838zm0-19.164c-1.59 0-2.24.65-2.24 2.24v13.528c0 1.633.607 2.24 2.24 2.24h6.764c1.633 0 2.24-.607 2.24-2.24V5.396c0-.818-.168-1.384-.509-1.728s-.91-.512-1.731-.512z"></path></svg>
+                                <path
+                                    fill="var(--mistica-color-tagTextActive)"
+                                    d="M11.39 19.862q.18.05.388.05c.353 0 .653-.112.85-.315q.297-.305.298-.835c0-.72-.425-1.15-1.145-1.15s-1.148.43-1.148 1.15q0 .526.298.835.184.188.46.265"
+                                ></path>
+                                <path
+                                    fill="var(--mistica-color-tagTextActive)"
+                                    d="M8.396 22.32c-1.141 0-1.974-.275-2.543-.838-.575-.57-.853-1.408-.853-2.558V5.396c0-1.121.278-1.945.85-2.526C6.428 2.286 7.26 2 8.396 2h6.764c1.145 0 1.977.277 2.55.853.572.575.846 1.404.846 2.543v13.528c0 1.15-.28 1.988-.852 2.558-.573.563-1.402.838-2.544.838zm0-19.164c-1.59 0-2.24.65-2.24 2.24v13.528c0 1.633.607 2.24 2.24 2.24h6.764c1.633 0 2.24-.607 2.24-2.24V5.396c0-.818-.168-1.384-.509-1.728s-.91-.512-1.731-.512z"
+                                ></path>
+                            </svg>
                         </div>
                         <img class="mistica-card__media" src="https://picsum.photos/1200/1200" />
                         <div class="mistica-tag-promo">Headline</div>
@@ -468,8 +494,13 @@ <h2 class="mistica-card__title">Title</h2>
                         </div>
                     </section>
                     <section class="mistica-card">
-                        <div class="mistica-card__asset" style="border-radius: 50%; height:40px; width: 40px;">
-                            <image src="https://mistica-xnuea75b0-flows-projects-65bb050e.vercel.app/static/media/avatar.cb2db2e6.jpg" />                      
+                        <div
+                            class="mistica-card__asset"
+                            style="border-radius: 50%; height: 40px; width: 40px"
+                        >
+                            <image
+                                src="https://mistica-xnuea75b0-flows-projects-65bb050e.vercel.app/static/media/avatar.cb2db2e6.jpg"
+                            />
                         </div>
                         <div class="mistica-tag-promo">Headline</div>
                         <h2 class="mistica-card__pretitle">Pretitle</h2>
@@ -495,7 +526,7 @@ <h2 class="mistica-card__title">Title</h2>
                     </section>
                     <section class="mistica-snap-card">
                         <div class="mistica-card__asset">
-                            <image src="https://picsum.photos/250/100" />                      
+                            <image src="https://picsum.photos/250/100" />
                         </div>
                         <h2 class="mistica-card__title">Title</h2>
                         <p class="mistica-card__subtitle">Subtitle</p>
@@ -646,106 +677,196 @@ <h2 class="mistica-card__title">Title</h2>
                     </div>
                 </div>
 
-                <h3 class="mistica-text-title2">Grid Layout</h3>              
+                <h3 class="mistica-text-title2">Grid Layout</h3>
                 <h4 class="mistica-text-title1">6 + 6</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">              
+                <section class="mistica-grid-layout" id="mistica-grid">
                     <div class="mistica-col-6">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                              </svg>                                    
+                            </svg>
                         </div>
                     </div>
                     <div class="mistica-col-6">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                              </svg>                                   
+                            </svg>
                         </div>
                     </div>
-                </section>                
+                </section>
                 <h4 class="mistica-text-title1">5 + 4</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">  
-                    <div class="mistica-col-1"></div>            
+                <section class="mistica-grid-layout" id="mistica-grid">
+                    <div class="mistica-col-1"></div>
                     <div class="mistica-col-5">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                              </svg>                                    
+                            </svg>
                         </div>
                     </div>
                     <div class="mistica-col-1"></div>
                     <div class="mistica-col-4">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                              </svg>                                    
+                            </svg>
                         </div>
                     </div>
-                    <div class="mistica-col-1"></div>            
-                </section>               
+                    <div class="mistica-col-1"></div>
+                </section>
                 <h4 class="mistica-text-title1">4 + 6</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">      
-                    <div class="mistica-col-1"></div>        
+                <section class="mistica-grid-layout" id="mistica-grid">
+                    <div class="mistica-col-1"></div>
                     <div class="mistica-col-4">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
                             </svg>
                         </div>
                     </div>
                     <div class="mistica-col-6">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
                             </svg>
                         </div>
                     </div>
-                    <div class="mistica-col-1"></div>         
-                </section>               
+                    <div class="mistica-col-1"></div>
+                </section>
                 <h4 class="mistica-text-title1">8 + 4</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">              
+                <section class="mistica-grid-layout" id="mistica-grid">
                     <div class="mistica-col-8">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                            </svg>                                    
+                            </svg>
                         </div>
                     </div>
                     <div class="mistica-col-4">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
                             </svg>
                         </div>
                     </div>
-                </section>               
+                </section>
                 <h4 class="mistica-text-title1">3 + 9</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">              
+                <section class="mistica-grid-layout" id="mistica-grid">
                     <div class="mistica-col-3">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                            </svg>                                    
+                            </svg>
                         </div>
                     </div>
                     <div class="mistica-col-9">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                            </svg>                                    
+                            </svg>
                         </div>
                     </div>
-                </section>                
+                </section>
             </div>
         </div>
         <script type="module" src="/main.js"></script>
     </body>
 
-    <svg style="display: none;">
+    <svg style="display: none">
         <symbol id="mistica-grid-svg">
-          <line x1="0" y1="0" x2="100" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1);" />
-          <line x1="100" y1="0" x2="0" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1);" />
+            <line x1="0" y1="0" x2="100" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1)" />
+            <line x1="100" y1="0" x2="0" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1)" />
         </symbol>
     </svg>
 </html>