Components - Select Box

comment

레이아웃 예제

  • 타입: 기본 (클래스 없음), ui-select-box--checkbox (체크박스), ui-select-box--filter (검색 필터 라벨 분리형), is-disabled (비활성화)
  • 필수 속성: 트리거에 js-select-value 클래스 필수, 선택된 값은 data-selected-text 속성을 가진 요소의 텍스트로 표시
  • 개발/퍼블 R&R 분리: 퍼블은 .ui-select-box 구조만 제공하며, 값 키가 필요할 때만 선택적으로 data-value를 넣는다(없으면 표시 텍스트를 사용). 개발은 버블링되는 selectbox:open/select/apply/clear/search 커스텀 이벤트를 구독하거나 window.SelectBoxAPI (init/open/close/reset)로 상태를 제어
  • 기본 타입: 옵션 클릭 시 트리거의 텍스트가 선택된 옵션으로 변경되고 ui-select-box 닫힘. .js-clear-trigger 클래스로 선택 초기화 버튼 추가 가능
  • 체크박스 타입: data-selected-text로 선택된 텍스트 표시, js-select-apply 클래스를 가진 버튼을 ui-select-box__footer에 추가하여 적용 버튼 사용, 여러 옵션 선택 가능. 최소 1개 이상 선택 필수
  • 브레드크럼 타입: 계층형 구조, data-parent-id로 부모 옵션 식별, data-child-id로 자식 옵션 식별, data-selected-text로 선택된 텍스트 표시, .js-select-search-input로 검색 입력 필드, js-no-results로 검색 결과 없음 메시지, .js-clear-trigger로 선택 초기화 버튼
  • 검색 가능 타입: .js-select-search-input로 검색 입력 필드, .option-group 클래스로 필터링할 옵션 그룹 지정, js-no-results로 검색 결과 없음 메시지, data-selected-text로 선택된 텍스트 표시, .js-clear-trigger로 선택 초기화 버튼
  • 필터 타입: ui-select-box--filter 클래스 사용, 라벨과 값이 분리된 구조, data-selected-text로 선택된 값 표시, .ui-select-box__label로 라벨 영역 구분
  • 키보드 네비게이션: Enter/Space로 열기, Arrow Up/Down으로 옵션 이동, ESC로 닫기, Home/End로 첫/마지막 옵션 이동, Tab으로 포커스 이동
  • ARIA 속성 자동 관리: role="combobox", aria-expanded, aria-controls, aria-haspopup, role="listbox", role="option", aria-selected, aria-label 속성이 자동으로 추가 및 업데이트
  • 외부 클릭 처리: ui-select-box 외부 클릭 시 자동으로 닫힘. 새 ui-select-box가 열릴 때 다른 열린 ui-select-box는 자동으로 닫힘
  • JavaScript 초기화: 페이지 로드 시 자동으로 모든 .ui-select-box 요소 초기화. data-select-box-initialized="true" 속성으로 중복 초기화 방지
Select Box - Case 1: 기본 (최소값 X)

HTML 구조

<div class="ui-select-box">
  <div class="ui-select-box__trigger js-select-value">
    <span data-selected-text>상태 변경</span>
  </div>
  <div class="ui-select-box__panel js-select-box-panel">
    <div class="ui-select-box__list">
      <div class="ui-select-box__option js-select-option"><span>활성</span></div>
      <div class="ui-select-box__option js-select-option"><span>중지</span></div>
      <div class="ui-select-box__option js-select-option"><span>삭제</span></div>
    </div>
  </div>
</div>

<!-- Disabled (js-disabled와 aria-disabled는 자동으로 추가됨) -->
<div class="ui-select-box is-disabled">
  <div class="ui-select-box__trigger js-select-value">
    <span data-selected-text>과일 선택</span>
  </div>
  <div class="ui-select-box__panel js-select-box-panel">
    <div class="ui-select-box__list">
      <div class="ui-select-box__option js-select-option"><span>Apple</span></div>
      <div class="ui-select-box__option js-select-option"><span>Banana</span></div>
      <div class="ui-select-box__option js-select-option"><span>Carrot</span></div>
    </div>
  </div>
</div>
Select Box - Case 2: 체크박스

HTML 구조

<div class="ui-select-box ui-select-box--checkbox">
  <div class="ui-select-box__trigger js-select-value">
    상태 : <span data-selected-text>전체</span>
  </div>
  <div class="ui-select-box__panel js-select-box-panel">
    <div class="ui-select-box__list js-select-checkbox-list">
      <div class="ui-select-box__option">
        <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>
      </div>
      <!-- ... 기타 옵션들 ... -->
    </div>
    <div class="ui-select-box__footer">
      <button type="button" class="ui-button ui-button--small ui-button--primary js-select-apply">적용</button>
    </div>
  </div>
</div>
Select Box - Case 3: 계층형 브레드크럼 (검색 가능)

HTML 구조

<div class="ui-select-box ui-select-box--breadcrumb">
  <div class="ui-select-box__trigger js-select-value">
    <span data-selected-text>담당 전체</span>
    <span class="ui-option-icon ui-option-icon--clear js-clear-trigger is-hidden"></span>
  </div>
  <div class="ui-select-box__panel js-select-box-panel">
    <div class="ui-select-box__search">
      <input type="text" class="ui-select-box__search-input js-select-search-input" placeholder="Search" maxlength="81" />
      <span class="ui-option-icon ui-option-icon--search"></span>
    </div>
    <div class="ui-select-box__list">
      <div class="option-group option-group--depth1 js-select-depth1" data-depth-type="1">
        <div class="ui-select-box__option js-select-option" data-parent-id="537">
          <span>회사이름</span>
          <span class="ui-option-icon ui-option-icon--arrow-right"></span>
        </div>
        <!-- ... 기타 옵션들 ... -->
      </div>
    <div class="option-group option-group--depth2 js-select-depth2" data-depth-type="2"></div>
  </div>
  <!-- no results
                            결과 없을 시 hidden 제거
                          -->
  <div class="ui-select-box__no-results js-no-results" hidden>No results found</div>
  <!-- // no results -->
</div>
</div>
Select Box - Case 4: 검색 가능

HTML 구조

<div class="ui-select-box ui-select-box--searchable">
  <div class="ui-select-box__trigger js-select-value">
    <span data-selected-text>광고계정 전체</span>
    <span class="ui-option-icon ui-option-icon--clear js-clear-trigger" style="display: none"></span>
  </div>
  <div class="ui-select-box__panel js-select-box-panel">
    <div class="ui-select-box__search">
      <input type="text" class="ui-select-box__search-input js-select-search-input" placeholder="Search" />
      <span class="ui-option-icon ui-option-icon--search"></span>
    </div>
    <div class="ui-select-box__list">
      <div class="option-group">
        <div class="ui-select-box__option js-select-option"><span>CTTD_CTTD</span></div>
        <div class="ui-select-box__option js-select-option"><span>test_test</span></div>
        <!-- ... 기타 옵션들 ... -->
      </div>
    </div>
    <!-- no results
                            결과 없을 시 hidden 제거
                          -->
    <div class="ui-select-box__no-results js-no-results" hidden>No results found</div>
    <!-- // no results -->
  </div>
</div>
Select Box - Case 5: 검색 필드 옆 select box
캠페인명
캠페인명
캠페인ID
광고그룹명
광고그룹ID
광고명
광고ID
광고상품명

HTML 구조

<div class="ui-search ui-search--filter">
  <div class="ui-search__filter">
    <div class="ui-select-box">
      <div class="ui-select-box__trigger js-select-value">
        <span data-selected-text>캠페인명</span>
      </div>
      <div class="ui-select-box__panel js-select-box-panel">
        <div class="ui-select-box__list">
          <div class="ui-select-box__option js-select-option"><span>캠페인명</span></div>
          <div class="ui-select-box__option js-select-option"><span>캠페인ID</span></div>
          <div class="ui-select-box__option js-select-option"><span>광고그룹명</span></div>
          <!-- ... 기타 옵션들 ... -->
        </div>
      </div>
    </div>
  </div>
  <div class="ui-search__field">
    <label for="campaignSearch" class="ui-input__label visually-hidden">캠페인 관리 검색</label>
    <input type="text" id="campaignSearch" class="ui-search__field-input" placeholder="검색" />
    <button type="button" class="ui-search__button" aria-label="검색"></button>
  </div>
</div>