Checkbox · Radio · Toggle · Select (선택 컨트롤)

<form class="pi-form-demo">
  <fieldset class="pi-field">
    <legend>발행 채널</legend>
    <label class="pi-checkbox"><input type="checkbox" id="ch-all"><span>전체 선택</span></label>
    <label class="pi-checkbox"><input type="checkbox" checked><span>네이버 블로그</span></label>
    <label class="pi-checkbox"><input type="checkbox"><span>인스타그램</span></label>
  </fieldset>
  <fieldset class="pi-field">
    <legend>주력 소재</legend>
    <label class="pi-radio"><input type="radio" name="mat" checked><span>노면표시재</span></label>
    <label class="pi-radio"><input type="radio" name="mat"><span>직물시트</span></label>
  </fieldset>
  <label class="pi-toggle">
    <input type="checkbox" role="switch" checked>
    <span class="pi-toggle__track"></span>
    <span class="pi-toggle__label">자동 발행</span>
  </label>
  <span class="pi-field">
    <label for="plan">구독 상품</label>
    <span class="pi-select">
      <select id="plan">
        <option value="">선택하세요</option>
        <option>디자인구독 · 베이직</option>
        <option>안전시설관리 구독</option>
      </select>
    </span>
  </span>
</form>

.pi-form-demo { display: flex; flex-direction: column; gap: var(--space-6); }
.pi-field { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pi-field legend, .pi-field > label { font: var(--text-label); color: var(--color-text-heading); padding: 0; }

.pi-checkbox, .pi-radio { display: flex; align-items: center; gap: var(--space-3); min-height: var(--checkbox-target); cursor: pointer; word-break: keep-all; }
.pi-checkbox input { width: var(--checkbox-size); height: var(--checkbox-size); border-radius: var(--checkbox-radius); accent-color: var(--checkbox-bg-checked); }
.pi-radio input { width: var(--radio-size); height: var(--radio-size); accent-color: var(--radio-dot); }
.pi-checkbox span, .pi-radio span { font: var(--text-body); color: var(--color-text-primary); }
.pi-checkbox input:focus-visible, .pi-radio input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pi-toggle { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); cursor: pointer; }
.pi-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pi-toggle__track { position: relative; flex: none; width: var(--toggle-track-width); height: var(--toggle-track-height); border-radius: var(--radius-full); background: var(--toggle-track-off); transition: background var(--duration-base) var(--easing-out); }
.pi-toggle__track::before { content: ""; position: absolute; top: var(--space-2); left: var(--space-2); width: var(--space-5); height: var(--space-5); border-radius: var(--radius-full); background: var(--toggle-thumb); transition: transform var(--duration-base) var(--easing-out); }
.pi-toggle input:checked + .pi-toggle__track { background: var(--toggle-track-on); }
.pi-toggle input:checked + .pi-toggle__track::before { transform: translateX(calc(var(--toggle-track-width) - var(--toggle-track-height))); }
.pi-toggle input:focus-visible + .pi-toggle__track { outline: none; box-shadow: var(--focus-ring); }
.pi-toggle__label { font: var(--text-body); color: var(--color-text-primary); }

.pi-select { position: relative; display: inline-flex; align-items: center; }
.pi-select select { appearance: none; -webkit-appearance: none; padding: var(--input-pad-y) var(--space-9) var(--input-pad-y) var(--input-pad-x); border: var(--border-thin) solid var(--input-border); border-radius: var(--input-radius); background: var(--input-bg); color: var(--input-fg); font: var(--text-body); min-height: var(--target-min); cursor: pointer; word-break: keep-all; }
.pi-select select:focus-visible { outline: none; border-color: var(--input-border-focus); box-shadow: var(--focus-ring); }
.pi-select select:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.pi-select::after { content: ""; position: absolute; right: var(--space-4); top: calc(50% - var(--space-1)); pointer-events: none; width: var(--space-2); height: var(--space-2); border-right: var(--border-medium) solid var(--select-arrow-fg); border-bottom: var(--border-medium) solid var(--select-arrow-fg); transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) { .pi-toggle__track, .pi-toggle__track::before { transition: none; } }

// 전체선택 체크박스의 일부선택(indeterminate) 동기화 (의존성 없음)
document.querySelectorAll(".pi-form-demo").forEach((form) => {
  const all = form.querySelector("#ch-all");
  if (!all) return;
  const items = [...form.querySelectorAll(".pi-checkbox input")].filter((el) => el !== all);
  const sync = () => {
    const on = items.filter((el) => el.checked).length;
    all.checked = on === items.length;
    all.indeterminate = on > 0 && on < items.length;
  };
  all.addEventListener("change", () => items.forEach((el) => (el.checked = all.checked)));
  items.forEach((el) => el.addEventListener("change", sync));
  sync();
});