Switch 스위치

두 개의 상호 배타적인 상태 사이를 전환하며, role="switch" 커스텀 컨트롤을 렌더링합니다.

기본 사용법

제어형 스위치

꺼짐

현재 상태: 꺼짐

import { useState } from 'react'
import { LhSwitch } from '@lh-ui/react'

export default function Demo() {
  const [active, setActive] = useState(false)

  return (
    <>
      <LhSwitch checked={active} onChange={(val) => setActive(val)} />
      <LhSwitch
        checked={active}
        activeText="켜기"
        inactiveText="끄기"
        onChange={(val) => setActive(val)}
      />
      <LhSwitch disabled />
      <LhSwitch loading />
    </>
  )
}

Switch Props

프로퍼티	설명	타입	옵션	기본값
checked	제어형 스위치 상태	boolean	—	—
defaultChecked	비제어 기본 상태	boolean	—	false
disabled	비활성화	boolean	—	false
loading	로딩 중	boolean	—	false
activeText	켜졌을 때 텍스트	string	—	언어 패 switch.on
inactiveText	꺼졌을 때 텍스트	string	—	언어 패 switch.off
size	크기	'large' | 'middle' | 'small'	—	ConfigProvider 따름
themeVars	컴포넌트 수준 테마 변수	Record<string, string>	—	—
sx	간편 레이아웃 프로퍼티	SxProps	—	—

Switch 이벤트

이벤트	설명	콜백 시그니처	Vue 대응
onChange	상태 변경(2개 매개변수)	(checked: boolean, event: MouseEvent | KeyboardEvent) => void	@change

키보드 인터랙션

스위치는 Enter / Space로 전환되며, 네이티브 checkbox와 동작이 일치합니다. aria-checked가 현재 상태와 동기화됩니다.

스타일

import '@lh-ui/react/style/switch'