From bd0ece2be8bc966a3a2f3a10399b10ec085be8f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Tue, 10 Mar 2026 00:04:50 +0100
Subject: [PATCH] nicolium: use type='radio' for toggle when applicable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/nicolium/src/components/ui/toggle.tsx | 15 ++++++++++-----
 packages/nicolium/src/styles/new/forms.scss    | 14 +++++++-------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/nicolium/src/components/ui/toggle.tsx b/packages/nicolium/src/components/ui/toggle.tsx
index ca080598d..90bd875bc 100644
--- a/packages/nicolium/src/components/ui/toggle.tsx
+++ b/packages/nicolium/src/components/ui/toggle.tsx
@@ -1,6 +1,12 @@
-import clsx from 'clsx';
 import React from 'react';
 
+declare module 'react' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface InputHTMLAttributes<T> {
+    switch?: boolean;
+  }
+}
+
 interface IToggle extends Pick<
   React.InputHTMLAttributes<HTMLInputElement>,
   'id' | 'name' | 'checked' | 'onChange' | 'required' | 'disabled'
@@ -21,16 +27,15 @@ const Toggle: React.FC<IToggle> = ({
   radio,
 }) => (
   <input
-    className={clsx('⁂-toggle', `⁂-toggle--${size}`, {
-      '⁂-toggle--radio': radio,
-    })}
-    type='checkbox'
+    className={`⁂-toggle ⁂-toggle--${size}`}
+    type={radio ? 'radio' : 'checkbox'}
     id={id}
     name={name}
     checked={checked}
     onChange={onChange}
     required={required}
     disabled={disabled}
+    switch={!radio}
   />
 );
 
diff --git a/packages/nicolium/src/styles/new/forms.scss b/packages/nicolium/src/styles/new/forms.scss
index 1fff360fd..f7a6b648f 100644
--- a/packages/nicolium/src/styles/new/forms.scss
+++ b/packages/nicolium/src/styles/new/forms.scss
@@ -389,7 +389,7 @@
     cursor: default;
   }
 
-  &:not(&--radio) {
+  &:not([type="radio"]) {
     &:not(:checked, :disabled) {
       background-color: rgb(var(--color-gray-500));
     }
@@ -411,7 +411,7 @@
     }
   }
 
-  &--radio {
+  &[type="radio"] {
     border: 2px solid;
 
     &::after {
@@ -455,7 +455,7 @@
       }
     }
 
-    &.⁂-toggle--radio {
+    &[type="radio"] {
       width: unset;
 
       &::after {
@@ -477,7 +477,7 @@
       }
     }
 
-    &.⁂-toggle--radio {
+    &[type="radio"] {
       width: unset;
 
       &::after {
@@ -487,7 +487,7 @@
     }
   }
 
-  &--sm:not(.⁂-toggle--radio):checked::after {
+  &--sm:not([type="radio"]):checked::after {
     transform: translateX(0.875rem);
 
     [dir='rtl'] & {
@@ -495,7 +495,7 @@
     }
   }
 
-  &--md:not(.⁂-toggle--radio):checked::after {
+  &--md:not([type="radio"]):checked::after {
     transform: translateX(1rem);
 
     [dir='rtl'] & {
@@ -503,7 +503,7 @@
     }
   }
 
-  &--radio {
+  &[type="radio"] {
     &::after {
       border-radius: 9999px;
     }