토글 스위치

알림 수신 여부·다크 모드처럼 변경 즉시 효과가 적용되는 설정에 사용하고, 변경에 별도의 "저장" 액션이 필요하다면 체크박스를 우선 고려합니다.

스위치

examples/toggle-switch/ToggleSwitchDefault.tsx

import { ToggleSwitch } from "@/components/ui/toggle-switch"

export default function ToggleSwitchDefault() {

스위치

examples/toggle-switch/ToggleSwitchChecked.tsx

import { ToggleSwitch } from "@/components/ui/toggle-switch"

export default function ToggleSwitchChecked() {

스위치

examples/toggle-switch/ToggleSwitchDisabled.tsx

import { ToggleSwitch } from "@/components/ui/toggle-switch"

export default function ToggleSwitchDisabled() {

스위치

examples/toggle-switch/ToggleSwitchDisabledChecked.tsx

import { ToggleSwitch } from "@/components/ui/toggle-switch"

export default function ToggleSwitchDisabledChecked() {

스위치스위치

examples/toggle-switch/ToggleSwitchMedium.tsx

import { ToggleSwitch } from "@/components/ui/toggle-switch"

export default function ToggleSwitchMedium() {

스위치스위치

examples/toggle-switch/ToggleSwitchLarge.tsx

import { ToggleSwitch } from "@/components/ui/toggle-switch"

export default function ToggleSwitchLarge() {

알림 받기

현재 상태: 꺼짐

examples/toggle-switch/ToggleSwitchControlled.tsx

"use client"

import * as React from "react"

examples/toggle-switch/ToggleSwitchAllVariants.tsx

import { ToggleSwitch } from "@/components/ui/toggle-switch"

export default function ToggleSwitchAllVariants() {

이름	타입	기본값	설명
aria-label	string	—	Defines a string value that labels the current element. @see aria-labelledby.
checked	boolean	—	—
className	string	—	—
disabled	boolean	—	—
id	string	—	—
label	string	—	—
onCheckedChange	((checked: boolean) => void)	—	—
onClick	MouseEventHandler<HTMLSpanElement>	—	—
size	enum	medium	—
style	CSSProperties	—	—
tabIndex	number	—	—

사용 지침