Components - Form

comment

Radio: ui-radio 클래스 사용, name 속성으로 그룹화, checked 속성으로 기본 선택
Checkbox: ui-checkbox 클래스 사용, checked 속성으로 체크 상태, ui-checkbox--indeterminate로 중간 상태 표시
Input: ui-input 클래스 사용, is-error 클래스로 에러 상태 표시, ui-error-message로 에러 메시지 표시 (ui-input 밖에 위치)
OTP Field: js-otp-field 클래스 필수, otp-field 내부에 여러 개의 ui-input__field 배치
JavaScript 초기화: initOtpFields() 함수를 호출하여 OTP 필드 기능 활성화. 페이지 로드 시 자동으로 초기화되거나 수동으로 호출 가능
자동 포커스 이동: 입력 시 다음 필드로 자동 포커스 이동 (값이 1자리 입력되면 다음 필드로 이동)
백스페이스 키 처리: 빈 필드에서 백스페이스 키 입력 시 이전 필드로 포커스 이동
버튼 자동 활성화: js-verify 클래스가 있는 버튼이 모든 필드가 채워지면 자동 활성화 (모든 필드가 1자리씩 입력되면 버튼 활성화)
중복 초기화 방지: data-otp-initialized="true" 속성으로 이미 초기화된 컨테이너는 건너뜀
초기화 방법: initOtpFields() 함수를 호출하면 페이지 내 모든 .js-otp-field 요소 자동 초기화
접근성: label 태그와 for 속성 사용, visually-hidden 클래스로 스크린 리더 전용 라벨 제공
Checkbox Group: js-check-group 클래스로 그룹화, js-check-group-parent로 부모 체크박스, js-check-group-child로 자식 체크박스 지정
JavaScript 초기화: initCheckboxGroups() 함수를 호출하여 체크박스 그룹 기능 활성화. 페이지 로드 시 자동으로 초기화되거나 수동으로 호출 가능
부모-자식 관계: 부모 체크박스 클릭 시 모든 자식 체크박스가 함께 체크/해제되며, 자식 체크박스 상태에 따라 부모는 checked/indeterminate 상태 자동 반영
Disabled 처리: disabled 속성이 있는 자식 체크박스는 자동으로 제외되어 상태 계산에 포함되지 않음

Radio

HTML 구조

<!-- checked -->
<label class="ui-radio">
  <input type="radio" name="demo1" class="ui-radio__input" checked />
  <span class="ui-radio__icon"></span>
  <span class="ui-radio__label">선택됨</span>
</label>

<!-- checked disabled -->
<label class="ui-radio">
  <input type="radio" name="demo2" class="ui-radio__input" checked disabled />
  <span class="ui-radio__icon"></span>
  <span class="ui-radio__label">선택 + 비활성</span>
</label>

<!-- default -->
<label class="ui-radio">
  <input type="radio" name="demo3" class="ui-radio__input" />
  <span class="ui-radio__icon"></span>
  <span class="ui-radio__label">미선택</span>
</label>

<!-- default disabled -->
<label class="ui-radio">
  <input type="radio" name="demo4" class="ui-radio__input" disabled />
  <span class="ui-radio__icon"></span>
  <span class="ui-radio__label">미선택 + 비활성</span>
</label>

checkbox

HTML 구조

<!-- checked -->
<label class="ui-checkbox">
  <input type="checkbox" class="ui-checkbox__input" checked />
  <span class="ui-checkbox__box"></span>
  <span class="ui-checkbox__label">왼쪽 텍스트</span>
</label>

<!-- checked disabled -->
<label class="ui-checkbox">
  <input type="checkbox" class="ui-checkbox__input" checked disabled />
  <span class="ui-checkbox__box"></span>
  <span class="ui-checkbox__label">왼쪽 텍스트</span>
</label>

<!-- default -->
<label class="ui-checkbox">
  <input type="checkbox" class="ui-checkbox__input" />
  <span class="ui-checkbox__box"></span>
  <span class="ui-checkbox__label">왼쪽 텍스트</span>
</label>

<!-- default disabled -->
<label class="ui-checkbox">
  <input type="checkbox" class="ui-checkbox__input" disabled />
  <span class="ui-checkbox__box"></span>
  <span class="ui-checkbox__label">왼쪽 텍스트</span>
</label>

checkbox - indeterminate

HTML 구조

<!-- indeterminate -->
<label class="ui-checkbox ui-checkbox--indeterminate">
  <input type="checkbox" class="ui-checkbox__input" aria-checked="mixed" />
  <span class="ui-checkbox__box"></span>
  <span class="ui-checkbox__label">왼쪽 텍스트</span>
</label>

<!-- indeterminate checked -->
<label class="ui-checkbox ui-checkbox--indeterminate">
  <input type="checkbox" class="ui-checkbox__input" checked />
  <span class="ui-checkbox__box"></span>
  <span class="ui-checkbox__label">왼쪽 텍스트</span>
</label>

<!-- Checkbox Group -->
<div class="js-check-group">
  <div class="ui-checkbox-trigger">
    <label class="ui-checkbox js-check-group-parent">
      <input type="checkbox" class="ui-checkbox__input" />
      <span class="ui-checkbox__box"></span>
      <span class="ui-checkbox__label">설정정보</span>
    </label>
  </div>

  <ul class="setting-list">
    <li class="setting-list__item">
      <label class="ui-checkbox js-check-group-child">
        <input type="checkbox" class="ui-checkbox__input" checked disabled />
        <span class="ui-checkbox__box"></span>
        <span class="ui-checkbox__label">상태</span>
      </label>
    </li>
    <li class="setting-list__item">
      <label class="ui-checkbox js-check-group-child">
        <input type="checkbox" class="ui-checkbox__input" checked disabled />
        <span class="ui-checkbox__box"></span>
        <span class="ui-checkbox__label">캠페인명</span>
      </label>
    </li>
    <!-- ... 기타 자식 체크박스들 ... -->
  </ul>
</div>

input[text, password, email, number]

HTML 구조

<!-- disabled -->
<div class="ui-input">
  <label for="disabled" class="ui-input__label visually-hidden">disabled</label>
  <input type="text" id="disabled" class="ui-input__field" placeholder="disabled" disabled />
</div>

<!-- default -->
<div class="ui-input">
  <label for="input-id" class="ui-input__label visually-hidden">라벨 텍스트</label>
  <input type="text" id="input-id" class="ui-input__field" placeholder="placeholder" />
</div>

<!-- error -->
<div class="ui-input is-error">
  <label for="error-input" class="ui-input__label visually-hidden">error</label>
  <input type="text" id="error-input" class="ui-input__field" placeholder="error" />
</div>
<p class="ui-error-message">에러 메시지 노출</p>

OTP Field

기본 / 버튼 포함 (submit 버튼 자동 활성화)

HTML 구조

<div class="js-otp-field">
  <label class="form-field__label">6자리 인증번호</label>
  <div class="ui-input">
    <div class="otp-field">
      <input type="text" class="ui-input__field" pattern="[0-9]*" maxlength="1" inputmode="numeric" autocomplete="one-time-code" />
      <input type="text" class="ui-input__field" pattern="[0-9]*" maxlength="1" inputmode="numeric" />
      <!-- ... 기타 필드들 ... -->
    </div>
  </div>
  <button type="submit" class="ui-button ui-button--primary js-verify" disabled>인증하기</button>
</div>