Switch

Switch (스위치)

이진(binary) 상태를 입력받는 컴포넌트예요. 켜짐/꺼짐 같은 두 가지 상태를 토글할 때 유용해요.

출처: 문서

본문

Switch는 이진 상태를 입력받는 컴포넌트예요. <ExampleTabs name="switch-basic" />

사용법 (Usage)

import { Switch } from "@chakra-ui/react"

<Switch.Root>
  <Switch.HiddenInput />
  <Switch.Control>
    <Switch.Thumb />
  </Switch.Control>
  <Switch.Label />
</Switch.Root>

Info: 닫힌(closed) 컴포넌트 구성을 선호한다면 아래 스니펫을 확인해 보세요.

단축 표현 (Shortcuts)

Switch 컴포넌트는 흔한 사용 사례를 위한 단축 표현도 제공해요.

SwitchControl

Switch.Control은 기본적으로 그 안에 Switch.Thumb을 렌더링해 줘요.

이렇게 쓰는 게 동작하고,

<Switch.Control>
  <Switch.Thumb />
</Switch.Control>

썸을 커스터마이즈할 필요가 없다면 이렇게 더 간결하게 쓸 수 있어요.

<Switch.Control />

예시 (Examples)

크기 (Sizes)

Switch.Root 컴포넌트에 size prop을 넘기면 스위치의 크기를 바꿀 수 있어요.

변형 (Variants)

Switch.Root 컴포넌트에 variant prop을 넘기면 스위치의 시각적 스타일을 바꿀 수 있어요.

색상 (Colors)

Switch.Root 컴포넌트에 colorPalette prop을 넘기면 컴포넌트의 색상을 바꿀 수 있어요.

제어 (Controlled)

checked와 onCheckedChange prop으로 스위치의 상태를 제어할 수 있어요.

Hook Form

react-hook-form과 스위치를 통합하는 예시예요.

비활성화 (Disabled)

Switch.Root 컴포넌트에 disabled prop을 넘기면 스위치를 비활성화할 수 있어요.

오류 상태 (Invalid)

Switch.Root 컴포넌트에 invalid prop을 넘기면 스위치의 오류 상태를 나타낼 수 있어요.

툴팁 (Tooltip)

스위치와 툴팁을 조합하는 예시예요.

트랙 인디케이터 (Track Indicator)

Switch.Indicator 컴포넌트로 체크 상태에 따라 다른 인디케이터를 표시할 수 있어요.

썸 인디케이터 (Thumb Indicator)

Switch.ThumbIndicator 컴포넌트로 스위치 썸에 아이콘을 추가할 수 있어요.

닫힌 컴포넌트 (Closed Component)

닫힌 컴포넌트 구성을 위해 Switch를 설정하는 방법이에요. 프로젝트에 자동으로 닫힌 컴포넌트를 추가하고 싶다면 다음 명령을 실행해요.

npx @chakra-ui/cli snippet add switch

사용하는 방법은 다음과 같아요.

<Switch>Activate Chakra</Switch>

Props

Switch 컴포넌트의 Root 파트 props에 대한 상세 정보는 공식 문서의 PropTable를 참고하세요.

더 알아보기 (Learn more)

• Switch - Ark UI 문서