Podo UI

Podo UI

Select

A component for selecting options from a dropdown.

Basic Usage

Select is a dropdown element that allows you to choose one option from multiple choices.

HTML
<select>
  <option value="" disabled selected>Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
Live Example:

Placeholder

You can use a placeholder to indicate the unselected state.

HTML
<select>
  <option value="" disabled selected>Select a category</option>
  <option value="electronics">Electronics</option>
  <option value="fashion">Fashion</option>
  <option value="food">Food</option>
</select>
Live Example:

Icons

You can add icons to select elements.

HTML
<div class="with-icon">
  <i class="icon-user"></i>
  <select>
    <option value="" disabled selected>Select user role</option>
    <option value="admin">Admin</option>
    <option value="user">User</option>
    <option value="guest">Guest</option>
  </select>
</div>

<div class="with-icon">
  <i class="icon-globe"></i>
  <select>
    <option value="" disabled selected>Select language</option>
    <option value="ko">Korean</option>
    <option value="en">English</option>
    <option value="ja">Japanese</option>
  </select>
</div>
Live Example:

States

Select supports default, disabled, and multiple selection states.

Live Example:

SCSS Styling

You can apply select styles using podo-ui mixins.

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