Podo UI

Podo UI

선택

드롭다운 형태로 옵션을 선택할 수 있는 컴포넌트입니다.

기본 사용법

select는 여러 옵션 중 하나를 선택할 수 있는 드롭다운 요소입니다.

HTML
<select>
  <option value="" disabled selected>옵션을 선택하세요</option>
  <option value="1">옵션 1</option>
  <option value="2">옵션 2</option>
  <option value="3">옵션 3</option>
</select>
실제 예제:

플레이스홀더

선택되지 않은 상태를 표시하기 위해 플레이스홀더를 사용할 수 있습니다.

HTML
<select>
  <option value="" disabled selected>카테고리를 선택하세요</option>
  <option value="electronics">전자제품</option>
  <option value="fashion">패션</option>
  <option value="food">식품</option>
</select>
실제 예제:

아이콘

select에 아이콘을 추가할 수 있습니다.

HTML
<div class="with-icon">
  <i class="icon-user"></i>
  <select>
    <option value="" disabled selected>사용자 역할 선택</option>
    <option value="admin">관리자</option>
    <option value="user">사용자</option>
    <option value="guest">게스트</option>
  </select>
</div>

<div class="with-icon">
  <i class="icon-globe"></i>
  <select>
    <option value="" disabled selected>언어 선택</option>
    <option value="ko">한국어</option>
    <option value="en">English</option>
    <option value="ja">日本語</option>
  </select>
</div>
실제 예제:

상태

select는 기본, 비활성화, 다중 선택 상태를 지원합니다.

실제 예제:

SCSS 스타일

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

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

.customSelect {
  padding: s(3) s(7) s(3) s(5);
  border: 1px solid color(border);
  border-radius: r(3);
  background: color(bg-block);
  color: color(default-deep-base);
  outline: none;
  appearance: none;
  cursor: pointer;

  // 커스텀 화살표 (자동 포함됨)
  background-image: url('data:image/svg+xml,...');
  background-repeat: no-repeat;
  background-position: right 11px center;

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

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

// 아이콘과 함께 사용
.withIcon {
  position: relative;
  display: inline-block;

  > i {
    position: absolute;
    left: s(3);
    top: 50%;
    transform: translateY(-50%);
    color: color(text-action);
    pointer-events: none;
  }

  > select {
    padding-left: s(8);
  }
}