Neumorphism UI

Switch

보통 변경 즉시 적용되는 켜짐·꺼짐 설정에 사용합니다.

미리보기

실시간·선택·잠긴 설정

제어 상태의 실시간 가격과 이메일 알림을 전환하고 관리자가 잠근 비활성 정책을 비교합니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/switch

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

실시간·선택·잠긴 설정

npx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/switch
Registry JSON

사용법

보이는 Label을 Switch의 id와 연결하세요. 초기값에는 defaultChecked를 사용하고 실제 설정을 관리할 때는 checked와 onCheckedChange를 앱 상태에 연결합니다.

"use client";

import { useId } from "react";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";

export default function Example() {
  const id = useId();
  return (
    <div className="flex items-center gap-3">
      <Switch id={id} name="notifications" defaultChecked />
      <Label htmlFor={id}>Email notifications</Label>
    </div>
  );
}

API 레퍼런스

native checkbox input에 role=switch를 적용해 폼과 브라우저 동작을 유지합니다. checked, defaultChecked, onCheckedChange를 모두 사용할 수 있습니다.

컴포넌트속성타입기본값설명
Switchchecked / defaultCheckedboolean—controlled 또는 초기 uncontrolled 켜짐 상태입니다.
SwitchonCheckedChange(checked: boolean) => void—켜짐 상태가 바뀔 때 호출됩니다.
SwitchonChangeReact.ChangeEventHandler<HTMLInputElement>—native checkbox change event를 받습니다.
Switchdisabledbooleanfalse입력과 포인터 동작을 비활성화합니다.
Switchname / value / requirednative input props—폼 제출에 사용하는 native checkbox 속성입니다.

접근성

  • 01

    실제 checkbox에 role=switch를 적용하므로 Space 키와 checked 상태를 보조기술에 전달합니다.

  • 02

    Label의 htmlFor와 Switch의 id를 연결하거나 aria-label을 제공합니다.

  • 03

    즉시 적용되지 않고 별도 저장이 필요한 boolean 선택에는 Checkbox가 더 자연스러울 수 있습니다.