CHANGED: README

ADDED: Labels for switch and radio component
2024-02-02 01:12:58 +04:00 · 2024-02-02 01:12:58 +04:00 · 252f03af7a
parent f39f302555
commit 252f03af7a
11 changed files with 202 additions and 106 deletions
--- a/README.md
+++ b/README.md
@ -6,11 +6,11 @@ This repository is including and will be including components, enumerates in tab
  - [x] Default
  - [x] Icon
  - [x] FAB
-  - [x] Radio
+  - [ ] Radio
  - [ ] Segmented
- [x] Checkbox
+- [ ] Checkbox
 - [x] Text fields
- [x] Switches
+- [ ] Switches
 - [ ] Chips
 - [x] Icon
 - [x] Ripple Effect
--- a/app/components/radios.tsx
+++ b/app/components/radios.tsx
@ -28,6 +28,13 @@ export default function Radios() {
                        <Radio defaultChecked disabled />
                    </div>
                </div>
+                <div>
+                    <h2> With Label </h2>
+                    <form style={{ display: 'flex', gap: '2em' }}>
+                        <Radio> Label </Radio>
+                        <Radio defaultChecked> Label </Radio>
+                    </form>
+                </div>
            </div>
        </div>
    );
--- a/app/components/switches.tsx
+++ b/app/components/switches.tsx
@ -77,6 +77,27 @@ export default function Switches() {
                        </div>
                    </div>
                </div>
+                <div style={{ display: 'flex', flexDirection: 'column' }}>
+                    <h2 style={{ margin: 0 }}> With label</h2>
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                            width: '100%',
+                            gap: '2em',
+                        }}
+                    >
+                        <div>
+                            <h2> Default </h2>
+                            <Switch icon labelPlacement={'left'}>
+                                Label
+                            </Switch>
+                            <Switch icon selected>
+                                Label
+                            </Switch>
+                        </div>
+                    </div>
+                </div>
            </div>
        </div>
    );
--- a/src/primitive-components/checkbox-layout/checkbox-layout.types.ts
+++ b/src/primitive-components/checkbox-layout/checkbox-layout.types.ts
@ -6,3 +6,7 @@ export interface CheckboxLayoutProps
    typeInput?: string;
    type?: string;
 }
+
+export interface LabelPlacement {
+    labelPlacement?: 'left' | 'right';
+}
--- a/src/primitive-components/radio/radio.tsx
+++ b/src/primitive-components/radio/radio.tsx
@ -5,14 +5,16 @@ import { RippleArea } from '../ripple/ripple-area';
 import { forwardRef, useRef, useState } from 'react';
 import useRippleEffect from '../ripple/hooks/useRippleEffect';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
+import { bool, oneOf, string } from 'prop-types';
+import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';

 /**
 * Radio component
 ** description
 */

-export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-    ({ centralRipple, ...props }, ref) => {
+export const Radio = forwardRef<HTMLInputElement, RadioProps & LabelPlacement>(
+    ({ centralRipple, children, labelPlacement = 'right', ...props }, ref) => {
        const [isActive, setIsActive] = useState<boolean>(false),
            ripplesRef = useRef(null),
            events = useRippleEffect(ripplesRef, setIsActive);
@ -22,28 +24,41 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(

        return (
            <div {...events} className={classes}>
-                <CheckBoxLayout {...props} ref={ref} type={'radio'} />
-                <span className={'m3 m3-radio-state-layer'} />
-                <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
-                    <circle
-                        className={'m3-radio-outline'}
-                        cx={'50%'}
-                        cy={'50%'}
+                {children && labelPlacement === 'left' && (
+                    <label htmlFor={props.id}>{children}</label>
+                )}
+                <span>
+                    <CheckBoxLayout {...props} ref={ref} type={'radio'} />
+                    <span className={'m3 m3-radio-state-layer'} />
+                    <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
+                        <circle
+                            className={'m3-radio-outline'}
+                            cx={'50%'}
+                            cy={'50%'}
+                        />
+                        <circle
+                            className={'m3-radio-state'}
+                            cx={'50%'}
+                            cy={'50%'}
+                        />
+                    </svg>
+                    <RippleArea
+                        callback={setIsActive}
+                        central={centralRipple}
+                        className={'m3-checkbox-ripple-layer'}
+                        ref={ripplesRef}
                    />
-                    <circle
-                        className={'m3-radio-state'}
-                        cx={'50%'}
-                        cy={'50%'}
-                    />
-                </svg>
-                <RippleArea
-                    callback={setIsActive}
-                    central={centralRipple}
-                    className={'m3-checkbox-ripple-layer'}
-                    ref={ripplesRef}
-                />
-                {props.children}
+                </span>
+                {children && labelPlacement === 'right' && (
+                    <label htmlFor={props.id}>{children}</label>
+                )}
            </div>
        );
    },
 );
+
+Radio.propTypes = {
+    children: string,
+    centralRipple: bool,
+    labelPlacement: oneOf(['left', 'right']),
+};
--- a/src/primitive-components/radio/radio.types.ts
+++ b/src/primitive-components/radio/radio.types.ts
@ -3,5 +3,6 @@ import { RipplePropsForComponents } from '../ripple/ripple.types';

 export type RadioProps = InputHTMLAttributes<HTMLInputElement> &
    RipplePropsForComponents<HTMLInputElement> & {
+        children?: string;
        centralRipple?: boolean;
    };
--- a/src/primitive-components/switch/switch.tsx
+++ b/src/primitive-components/switch/switch.tsx
@ -3,35 +3,60 @@
 import React, { forwardRef } from 'react';
 import { SwitchMainProps } from './switch.types';
 import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
+import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';

 /**
 * Switch component
 ** description
 */

-export const Switch = forwardRef<HTMLInputElement, SwitchMainProps>(
-    ({ icon, disabled, selected = false, ...props }, ref) => (
+export const Switch = forwardRef<
+    HTMLInputElement,
+    SwitchMainProps & LabelPlacement
+>(
+    (
+        {
+            icon,
+            disabled,
+            selected = false,
+            children,
+            labelPlacement = 'right',
+            ...props
+        },
+        ref,
+    ) => (
        <div className={'m3 m3-switch'}>
-            <CheckBoxLayout
-                {...props}
-                className={`m3 ${props.className ?? ''}`.trimEnd()}
-                disabled={disabled}
-                ref={ref}
-                type={'checkbox'}
-            />
-            <svg>
-                <rect className={'m3 m3-switch-track'} />
-                <circle className={'m3 m3-switch-handler'} />
-                <circle className={'m3 m3-switch-handler-state-layer'} />
-                <g>
-                    {icon && !selected && (
-                        <text className={'m3 m3-icon-unchecked'}>close</text>
-                    )}
-                    {icon && (
-                        <text className={'m3 m3-icon-checked'}>check</text>
-                    )}
-                </g>
-            </svg>
+            {children && labelPlacement === 'left' && (
+                <label htmlFor={props.id}>{children}</label>
+            )}
+            <span>
+                <CheckBoxLayout
+                    {...props}
+                    className={`m3 ${props.className ?? ''}`.trimEnd()}
+                    disabled={disabled}
+                    ref={ref}
+                    type={'checkbox'}
+                />
+                <svg>
+                    <rect className={'m3 m3-switch-track'} />
+                    <circle className={'m3 m3-switch-handler'} />
+                    <circle className={'m3 m3-switch-handler-state-layer'} />
+                    <g>
+                        {icon && !selected && (
+                            <text className={'m3 m3-icon-unchecked'}>
+                                close
+                            </text>
+                        )}
+                        {icon && (
+                            <text className={'m3 m3-icon-checked'}>check</text>
+                        )}
+                    </g>
+                </svg>
+            </span>
+
+            {children && labelPlacement === 'right' && (
+                <label htmlFor={props.id}>{children}</label>
+            )}
        </div>
    ),
 );
--- a/src/styles/generics.css
+++ b/src/styles/generics.css
@ -210,16 +210,22 @@ svg.m3.m3-svg-icon > text.m3-Sharp {
 }

 div.m3.m3-radio {
+  display: inline-flex;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+div.m3.m3-radio > span {
  width: 20px;
  height: 20px;
  align-items: center;
  display: inline-flex;
  justify-content: center;
 }
-div.m3.m3-radio > span.m3-checkbox-ripple-layer, div.m3.m3-radio span.m3.m3-radio-state-layer {
+div.m3.m3-radio > span > span.m3-checkbox-ripple-layer, div.m3.m3-radio > span span.m3.m3-radio-state-layer {
  z-index: 5;
 }
-div.m3.m3-radio > span.m3.m3-radio-state-layer {
+div.m3.m3-radio > span > span.m3.m3-radio-state-layer {
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
@ -227,7 +233,7 @@ div.m3.m3-radio > span.m3.m3-radio-state-layer {
  pointer-events: none;
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
-div.m3.m3-radio > input[type=radio].m3.m3-radio {
+div.m3.m3-radio > span > input[type=radio].m3.m3-radio {
  margin: 0;
  width: 20px;
  height: 20px;
@ -236,47 +242,47 @@ div.m3.m3-radio > input[type=radio].m3.m3-radio {
  appearance: none;
  position: absolute;
 }
-div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
+div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):checked:hover + span.m3.m3-radio-state-layer {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
 }
-div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
+div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
 }
-div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
+div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):is(:checked:active, :indeterminate:active) + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 20%, transparent);
 }
-div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
+div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):hover + span.m3.m3-radio-state-layer {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
 }
-div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
+div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer {
  background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
-div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
+div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:disabled):active + span.m3.m3-radio-state-layer ~ span.m3-ripple-domain > .m3.ripple {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 20%, transparent);
 }
-div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
+div.m3.m3-radio > span > input[type=radio].m3.m3-radio:disabled:is(:not(:checked), div.m3.m3-radio > span > input[type=radio].m3.m3-radio:disabled:checked) ~ svg > circle.m3-radio-outline {
  stroke-opacity: 38%;
  stroke: var(--md-sys-color-on-surface);
 }
-div.m3.m3-radio > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
+div.m3.m3-radio > span > input[type=radio].m3.m3-radio:disabled:checked ~ svg > circle.m3-radio-state {
  fill-opacity: 38%;
  fill: var(--md-sys-color-on-surface);
 }
-div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
+div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-outline {
  stroke: var(--md-sys-color-on-surface-variant);
 }
-div.m3.m3-radio > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
+div.m3.m3-radio > span > input[type=radio].m3.m3-radio:not(:checked) ~ svg > circle.m3-radio-state {
  fill-opacity: 0;
  fill: var(--md-sys-color-primary);
 }
-div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
+div.m3.m3-radio > span > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-outline {
  stroke: var(--md-sys-color-primary);
 }
-div.m3.m3-radio > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
+div.m3.m3-radio > span > input[type=radio].m3.m3-radio:checked ~ svg > circle.m3-radio-state {
  fill-opacity: 1;
  fill: var(--md-sys-color-primary);
 }
-div.m3.m3-radio svg {
+div.m3.m3-radio > span svg {
  margin: 0;
  width: 20px;
  z-index: 10;
@ -284,17 +290,17 @@ div.m3.m3-radio svg {
  pointer-events: none;
  aspect-ratio: inherit;
 }
-div.m3.m3-radio svg > circle {
+div.m3.m3-radio > span svg > circle {
  transition: fill, stroke, 0.2s cubic-bezier(0.2, 0, 0, 1);
 }
-div.m3.m3-radio svg > circle.m3-radio-outline {
+div.m3.m3-radio > span svg > circle.m3-radio-outline {
  r: 9px;
  fill: black;
  fill-opacity: 0;
  stroke-width: 2px;
  stroke: var(--md-sys-color-on-surface-variant);
 }
-div.m3.m3-radio svg > circle.m3-radio-state {
+div.m3.m3-radio > span svg > circle.m3-radio-state {
  r: 5px;
 }

@ -546,40 +552,46 @@ button:not(.m3-fab, .m3-icon-button):disabled.outlined {
 }
 div.m3.m3-switch {
  margin: 4px;
+  gap: 20px;
  box-sizing: content-box;
  display: flex;
  align-items: center;
-  justify-content: center;
+  justify-content: space-between;
  width: 52px;
  height: 32px;
 }
-div.m3.m3-switch > svg {
+div.m3.m3-switch > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+div.m3.m3-switch > span > svg {
  overflow: visible;
  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 52px;
  height: 32px;
 }
-div.m3.m3-switch > svg > g {
+div.m3.m3-switch > span > svg > g {
  transform: translate(11.5%, 81%);
  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-div.m3.m3-switch > svg > g > text {
+div.m3.m3-switch > span > svg > g > text {
  font-family: Material-Symbols-Outlined-Regular;
  font-size: 20px;
 }
-div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler-state-layer, div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler {
  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cy: 50%;
  cx: 16px;
 }
-div.m3.m3-switch > svg > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler-state-layer {
  r: 20px;
  fill-opacity: 0;
 }
-div.m3.m3-switch > svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > span > svg > circle.m3.m3-switch-handler {
  r: 8px;
 }
-div.m3.m3-switch > svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > span > svg > rect.m3.m3-switch-track {
  transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  stroke-width: 2px;
  border-radius: 16px;
@ -587,7 +599,7 @@ div.m3.m3-switch > svg > rect.m3.m3-switch-track {
  width: 50px;
  height: 30px;
 }
-div.m3.m3-switch > input.m3 {
+div.m3.m3-switch > span > input.m3 {
  cursor: pointer;
  appearance: none;
  opacity: 0 !important;
@ -596,98 +608,98 @@ div.m3.m3-switch > input.m3 {
  height: 32px;
  position: absolute;
 }
-div.m3.m3-switch > input.m3:disabled {
+div.m3.m3-switch > span > input.m3:disabled {
  cursor: not-allowed;
 }
-div.m3.m3-switch > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > span > input.m3:not(:checked, :disabled) + svg > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-outline);
 }
-div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > g {
+div.m3.m3-switch > span > input.m3:checked:not(:disabled) + svg > g {
  transform: translate(50%, 81%);
 }
-div.m3.m3-switch > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > span > input.m3:checked:not(:disabled) + svg > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-on-primary);
 }
-div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
+div.m3.m3-switch > span > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-unchecked {
  fill: var(--md-sys-color-on-primary);
 }
-div.m3.m3-switch > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
+div.m3.m3-switch > span > input.m3:not(:disabled) + svg > g > text.m3.m3-icon-checked {
  fill: var(--md-sys-color-on-primary-container);
 }
-div.m3.m3-switch > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > span > input.m3:checked:disabled + svg > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-surface);
 }
-div.m3.m3-switch > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
+div.m3.m3-switch > span > input.m3:checked + svg > circle.m3.m3-switch-handler, div.m3.m3-switch > span > input.m3 + svg:has(text.m3.m3-icon-unchecked) > circle.m3.m3-switch-handler {
  r: 12px;
 }
-div.m3.m3-switch > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
+div.m3.m3-switch > span > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
  opacity: 0;
 }
-div.m3.m3-switch > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
+div.m3.m3-switch > span > input.m3:checked + svg > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
  cx: calc(100% - 16px);
 }
-div.m3.m3-switch > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
+div.m3.m3-switch > span > input.m3:not(:checked) + svg > g > text.m3.m3-icon-checked {
  opacity: 0;
 }
-div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:checked, div.m3.m3-switch > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > span > input.m3:is(div.m3.m3-switch > span > input.m3:checked, div.m3.m3-switch > span > input.m3):not(:disabled):active + svg > circle.m3.m3-switch-handler {
  r: 14px;
 }
-div.m3.m3-switch > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > span > input.m3:not(:checked):disabled + svg > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-on-surface);
  fill-opacity: 38%;
 }
-div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > span > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-primary-container);
 }
-div.m3.m3-switch > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch > span > input.m3:hover:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
  fill: var(--md-sys-color-primary);
  fill-opacity: 8%;
 }
-div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
+div.m3.m3-switch > span > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-on-surface-variant);
 }
-div.m3.m3-switch > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch > span > input.m3:hover:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
  fill: var(--md-sys-color-on-surface);
  fill-opacity: 8%;
 }
-div.m3.m3-switch > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch > span > input.m3:active:not(:disabled):checked + svg > circle.m3.m3-switch-handler-state-layer {
  fill: var(--md-sys-color-primary);
  fill-opacity: 12%;
 }
-div.m3.m3-switch > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
+div.m3.m3-switch > span > input.m3:active:not(:disabled):not(:checked) + svg > circle.m3.m3-switch-handler-state-layer {
  fill: var(--md-sys-color-on-surface);
  fill-opacity: 12%;
 }
-div.m3.m3-switch > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > span > input.m3:is(:checked, :checked:disabled) + svg > rect.m3.m3-switch-track {
  rx: 16px;
  width: 52px;
  height: 32px;
  stroke-width: 0;
 }
-div.m3.m3-switch > input.m3:is(div.m3.m3-switch > input.m3:not(:checked), div.m3.m3-switch > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > span > input.m3:is(div.m3.m3-switch > span > input.m3:not(:checked), div.m3.m3-switch > span > input.m3:not(:checked):disabled) + svg > rect.m3.m3-switch-track {
  x: 1px;
  y: 1px;
 }
-div.m3.m3-switch > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > span > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
  stroke: var(--md-sys-color-outline);
  fill: var(--md-sys-color-surface-container-highest);
 }
-div.m3.m3-switch > input.m3:checked + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > span > input.m3:checked + svg > rect.m3.m3-switch-track {
  stroke: var(--md-sys-color-primary);
  fill: var(--md-sys-color-primary);
 }
-div.m3.m3-switch > input.m3:disabled + svg > g > text.m3 {
+div.m3.m3-switch > span > input.m3:disabled + svg > g > text.m3 {
  fill: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 38%, transparent);
 }
-div.m3.m3-switch > input.m3:disabled + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > span > input.m3:disabled + svg > rect.m3.m3-switch-track {
  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  fill: color-mix(in srgb, var(--md-sys-color-surface-variant) 12%, transparent);
 }
-div.m3.m3-switch > input.m3:checked:disabled + svg > g > text.m3 {
+div.m3.m3-switch > span > input.m3:checked:disabled + svg > g > text.m3 {
  transform: translateX(38.5%);
  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
 }
-div.m3.m3-switch > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
+div.m3.m3-switch > span > input.m3:checked:disabled + svg > rect.m3.m3-switch-track {
  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
 }
--- a/src/styles/generics.css.map
+++ b/src/styles/generics.css.map
--- a/src/styles/radio.sass
+++ b/src/styles/radio.sass
@ -1,6 +1,11 @@
@import "mixins/m3-mixins"

 div.m3.m3-radio
+    display: inline-flex
+    justify-content: space-between
+    gap: 20px
+
+div.m3.m3-radio > span
    width: 20px
    height: 20px
    align-items: center
--- a/src/styles/swtich.sass
+++ b/src/styles/swtich.sass
@ -1,13 +1,19 @@
 div.m3.m3-switch
    margin: 4px
+    gap: 20px
    box-sizing: content-box
    display: flex
    align-items: center
-    justify-content: center
+    justify-content: space-between
    width: 52px
    height: 32px

-    & > svg
+    & > span
+        display: flex
+        align-items: center
+        justify-content: center
+
+    & > span > svg
        overflow: visible
        transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275)
        width: 52px
@ -40,7 +46,7 @@ div.m3.m3-switch
            width: 50px
            height: 30px

-    & > input.m3
+    & > span > input.m3
        cursor: pointer
        appearance: none
        opacity: 0 !important