# All files / src/components/ui switch.tsx

100% Statements 35/35
100% Branches 0/0
100% Functions 0/0
100% Lines 35/35

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    361x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
     import { ComponentProps, forwardRef } from "react"
    import { cn } from "@/lib/utils"

    interface SwitchProps extends Omit<ComponentProps<"input">, "type"> {
      checked?: boolean
      onCheckedChange?: (checked: boolean) => void
    }

    export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
      ({ className, checked, onCheckedChange, ...props }, ref) => (
        <div className={cn("mat-mdc-slide-toggle", className)}>
          <button type="button" className="mdc-switch" role="switch" aria-checked={checked}>
            <div className="mdc-switch__track" />
            <div className="mdc-switch__handle-track">
              <div className="mdc-switch__handle">
                <div className="mdc-switch__shadow">
                  <div className="mdc-elevation-overlay" />
                </div>
                <div className="mdc-switch__ripple" />
              </div>
            </div>
            <input
              ref={ref}
              type="checkbox"
              className="mdc-switch__native-control"
              role="switch"
              checked={checked}
              onChange={(e) => onCheckedChange?.(e.target.checked)}
              {...props}
            />
          </button>
        </div>
      )
    )
    Switch.displayName = "Switch"