{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"switch","type":"registry:ui","title":"Switch","description":"Switch, part of the Inputs family.","dependencies":[],"registryDependencies":["https://caliperui.site/r/styles.json"],"files":[{"path":"ui/switch.tsx","type":"registry:ui","target":"components/ui/switch.tsx","content":"import type { ComponentProps } from \"react\";\nimport \"./switch.css\";\n\nexport type SwitchProps = Omit<ComponentProps<\"input\">, \"type\" | \"role\">;\n\nexport function Switch(props: SwitchProps) {\n  return (\n    <span data-slot=\"switch-root\">\n      <input data-slot=\"switch\" {...props} type=\"checkbox\" role=\"switch\" />\n      <span data-slot=\"switch-track\" aria-hidden=\"true\">\n        <span data-slot=\"switch-thumb\" />\n      </span>\n    </span>\n  );\n}\n"},{"path":"ui/switch.css","type":"registry:file","target":"components/ui/switch.css","content":"/* switch.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n  /* The native input fills the target; the smaller indicator is decorative. */\n  [data-slot=\"switch-root\"] {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--control-height);\n    height: var(--control-height);\n    vertical-align: middle;\n  }\n\n  [data-slot=\"switch-root\"] {\n    width: 44px;\n  }\n\n  [data-slot=\"switch\"] {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    appearance: none;\n    border: 0;\n    background: transparent;\n    outline: none;\n    cursor: pointer;\n    touch-action: manipulation;\n  }\n\n  /* Choice marks: one 18px recessed mark for checkbox and radio. Checked\n     marks fill with ink; the check stroke draws itself and the radio dot\n     settles in. The switch thumb stretches while pressed, then settles. */\n  [data-slot=\"switch-track\"] {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    pointer-events: none;\n    background: var(--field);\n    box-shadow: var(--shadow-field);\n    transition:\n      background-color var(--duration-fast) var(--ease-out),\n      box-shadow var(--duration-fast) var(--ease-out);\n  }\n\n  [data-slot=\"switch\"]:checked + [data-slot=\"switch-track\"] {\n    background: var(--accent);\n    box-shadow: 0 0 0 1px var(--accent), inset 0 1px 0 rgb(255 255 255 / 14%);\n  }\n\n  [data-slot=\"switch-track\"] {\n    justify-content: flex-start;\n    width: 36px;\n    height: 22px;\n    padding: 2px;\n    border-radius: 999px;\n    background: color-mix(in srgb, var(--border-strong) 45%, var(--sunken));\n    box-shadow: inset 0 1px 2px rgb(20 20 28 / 18%);\n  }\n\n  [data-slot=\"switch-thumb\"] {\n    width: 18px;\n    height: 18px;\n    flex-shrink: 0;\n    border-radius: 8px;\n    background: #ffffff;\n    box-shadow: 0 1px 2px rgb(18 18 22 / 30%), 0 0 0 0.5px rgb(18 18 22 / 10%);\n    transform-origin: 9px 50%;\n    transition:\n      transform 260ms var(--ease-settle),\n      background-color var(--duration-fast) var(--ease-out);\n  }\n\n  [data-slot=\"switch\"]:checked\n    + [data-slot=\"switch-track\"]\n    [data-slot=\"switch-thumb\"] {\n    transform: translateX(14px);\n    background: var(--accent-foreground);\n  }\n  [data-slot=\"switch\"]:active:not(:disabled)\n    + [data-slot=\"switch-track\"]\n    [data-slot=\"switch-thumb\"] {\n    transform: scaleX(1.22);\n    transition-duration: 160ms;\n  }\n  [data-slot=\"switch\"]:checked:active:not(:disabled)\n    + [data-slot=\"switch-track\"]\n    [data-slot=\"switch-thumb\"] {\n    transform: translateX(10px) scaleX(1.22);\n  }\n\n  [data-slot=\"switch\"]:dir(ltr) + [data-slot=\"switch-track\"] {\n    direction: ltr;\n  }\n  [data-slot=\"switch\"]:dir(rtl) + [data-slot=\"switch-track\"] {\n    direction: rtl;\n  }\n  [data-slot=\"switch\"]:dir(rtl):checked\n    + [data-slot=\"switch-track\"]\n    [data-slot=\"switch-thumb\"] {\n    transform: translateX(-14px);\n  }\n\n  [data-slot=\"switch\"]:focus-visible + [data-slot=\"switch-track\"] {\n    outline: 2px solid var(--ring);\n    outline-offset: 2px;\n  }\n\n  [data-slot=\"switch\"][aria-invalid=\"true\"] + [data-slot=\"switch-track\"] {\n    box-shadow: var(--shadow-field-invalid);\n    outline-color: var(--destructive);\n  }\n\n  [data-slot=\"switch\"]:disabled {\n    cursor: not-allowed;\n  }\n  [data-slot=\"switch\"]:disabled + [data-slot=\"switch-track\"] {\n    background: var(--sunken);\n    box-shadow: var(--shadow-field-quiet);\n    color: var(--muted-foreground);\n  }\n  [data-slot=\"switch\"]:disabled:checked + [data-slot=\"switch-track\"] {\n    background: var(--border);\n    box-shadow: none;\n  }\n  [data-slot=\"switch\"]:disabled + [data-slot=\"switch-track\"] [data-slot=\"switch-thumb\"] {\n    background: var(--border);\n    box-shadow: none;\n  }\n\n  @media (forced-colors: active) {\n    [data-slot=\"switch-track\"] {\n      forced-color-adjust: none;\n      background: Canvas;\n      border-color: CanvasText;\n    }\n    [data-slot=\"switch\"]:checked + [data-slot=\"switch-track\"] {\n      background: Highlight;\n      border-color: Highlight;\n    }\n    [data-slot=\"switch-track\"] {\n      border: 1px solid CanvasText;\n      box-shadow: none;\n    }\n    [data-slot=\"switch-thumb\"] {\n      background: CanvasText;\n    }\n    [data-slot=\"switch\"]:checked\n      + [data-slot=\"switch-track\"]\n      [data-slot=\"switch-thumb\"] {\n      background: HighlightText;\n    }\n    [data-slot=\"switch\"]:hover:not(:disabled) + [data-slot=\"switch-track\"] {\n      border-color: CanvasText;\n    }\n    [data-slot=\"switch\"]:focus-visible + [data-slot=\"switch-track\"] {\n      outline-color: Highlight;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [data-slot=\"switch-track\"],\n    [data-slot=\"switch-thumb\"] {\n      transition: none;\n    }\n  }\n}\n"}],"categories":["inputs"],"meta":{"tier":"free","license":"MIT","family":"inputs","docs":"/docs/components/switch"}}