Podo UI

Podo UI

토글

켜기/끄기 스위치를 제공하는 토글 컴포넌트입니다.

기본 사용법

토글은 체크박스의 변형으로, 켜기/끄기 상태를 시각적으로 표현합니다.

HTML
<label>
  <input type="checkbox" class="toggle" />
  토글 옵션
</label>

<label>
  <input type="checkbox" class="toggle" checked />
  켜짐 상태
</label>

<label>
  <input type="checkbox" class="toggle" disabled />
  비활성화
</label>

<label>
  <input type="checkbox" class="toggle" checked disabled />
  켜짐 (비활성화)
</label>
실제 예제:

실용적인 예제

실제 설정 화면에서 토글을 활용한 예제입니다.

알림 설정
이메일 알림중요한 업데이트를 이메일로 받습니다
푸시 알림모바일 기기로 알림을 받습니다
SMS 알림문자 메시지로 알림을 받습니다
마케팅 수신 동의프로모션 및 이벤트 정보를 받습니다

접근성

토글은 키보드 포커스와 Space/Enter 키로 조작할 수 있습니다.

키보드 조작 데모 (Tab으로 이동, Space로 토글)

SCSS 스타일

podo-ui의 믹스인을 사용하여 토글 스타일을 적용할 수 있습니다.

component.module.scss
@use 'podo-ui/mixin' as *;

.toggleWrapper {
  display: flex;
  align-items: center;
  gap: s(3);

  label {
    display: flex;
    align-items: center;
    gap: s(2);
    cursor: pointer;
    user-select: none;
  }
}

// 커스텀 토글 스타일
.toggle {
  appearance: none;
  position: relative;
  border-radius: r(full);
  width: 33px;
  height: 20px;
  background-color: color(bg-toggle);
  cursor: pointer;
  transition: 0.15s;

  &::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: 0.15s;
  }

  &:checked {
    background-color: color(info);

    &::before {
      left: auto;
      right: 3px;
    }
  }

  &:disabled {
    background-color: color(bg-disabled);
    cursor: not-allowed;

    &::before {
      background-color: color(bg-toggle);
    }
  }

  &:focus-visible:not(:disabled) {
    outline: 4px solid color(primary-outline);
  }
}

다크 모드

다크 모드에서도 자동으로 적절한 스타일이 적용됩니다.