Toggle

A toggle switch component for on/off states.

Basic Usage

Toggle is a variant of checkbox that visually represents on/off states.

HTML

<label>
  <input type="checkbox" class="toggle" />
  Toggle option
</label>

<label>
  <input type="checkbox" class="toggle" checked />
  On state
</label>

<label>
  <input type="checkbox" class="toggle" disabled />
  Disabled
</label>

<label>
  <input type="checkbox" class="toggle" checked disabled />
  On (Disabled)
</label>

Live Example:

Toggle optionOn stateDisabledOn (Disabled)

Practical Example

An example of using toggles in a settings screen.

Notification Settings

Email NotificationsReceive important updates via email

Push NotificationsReceive notifications on mobile devices

SMS NotificationsReceive notifications via text messages

Marketing CommunicationsReceive promotional and event information

Accessibility

Toggles can be operated using keyboard focus and Space/Enter keys.

Keyboard operation demo (Tab to navigate, Space to toggle)

Focusable toggle 1Focusable toggle 2Focusable toggle 3

SCSS Styling

You can apply toggle styles using podo-ui mixins.

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);
  }
}

Dark Mode