Switch

사용자가 선택/해제를 전환할 수 있는 컨트롤입니다.

다크 모드

import { Switch } from "@chadcn/ui"
import { Label } from "@/components/ui/label"
import { useTheme } from "next-themes"

export function SwitchDemo() {
  const { setTheme, resolvedTheme } = useTheme()
  const isDark = resolvedTheme === "dark"

  return (
    <div className="flex items-center gap-2">
      <Switch
        id="dark-mode"
        checked={isDark}
        onCheckedChange={(checked) =>
          setTheme(checked ? "dark" : "light")
        }
      />
      <Label htmlFor="dark-mode">다크 모드</Label>
    </div>
  )
}

동작 방식

실수로 상태가 변경되는 것을 방지하기 위해 클릭 토글이 비활성화되어 있습니다. 데스크톱에서는 브라우저 창 이동에 따른 관성으로 thumb가 반응합니다. 모바일에서는 기기를 기울이면 자이로스코프를 통해 중력이 적용됩니다.
thumb가 가장자리에서 물리적으로 튕기며, 토글 경계에 대한 명확한 시각적 피드백을 제공합니다.

설치

준비 중패키지가 아직 npm에 게시되지 않았습니다.

pnpm add @chadcn/ui

사용법

import "@chadcn/ui/styles.css"
import { Switch } from "@chadcn/ui"

<Switch />

준비 중패키지가 아직 npm에 게시되지 않았습니다.

예제

비활성화

disabled prop으로 스위치를 비활성화합니다.

비활성화

import { Switch } from "@chadcn/ui"
import { Label } from "@/components/ui/label"

export function SwitchDisabled() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="disabled-switch" disabled />
      <Label htmlFor="disabled-switch">비활성화</Label>
    </div>
  )
}

API 레퍼런스

자세한 내용은 Radix Switch 문서를 참고하세요.