폼과 선택@neumorphism-ui/switch

Switch

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

@neumorphism-ui/switch

Registry JSON

미리보기

실시간 가격시장 가격을 자동으로 갱신합니다.이메일 알림중요한 변동만 받아봅니다.관리자 정책현재 워크스페이스에서 잠겨 있습니다.

설치

npx shadcn@latest add @neumorphism-ui/switch

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

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

Import

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

Example

<div className="flex items-center justify-between gap-4">
  <Label htmlFor="system-theme">시스템 테마 따르기</Label>
  <Switch id="system-theme" name="systemTheme" defaultChecked />
</div>

API 레퍼런스

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

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성