SearchBar — Hyomin Design System

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/search-bar.css" />

Live

States

Default

Focus

Filled

Disabled

Specs

State	Border	Background	Text Color
Default	gray-300	#ffffff	gray-300 (placeholder)
Focus	error-main (#b91c1c)	#ffffff	gray-900
Filled	gray-300	#ffffff	gray-900
Disabled	gray-300	gray-100	gray-400

Code

<!-- Default -->
<div class="search-bar">
  <div class="search-bar__input-wrap">
    <input class="search-bar__input" type="text" placeholder="검색어를 입력하세요." aria-label="검색" />
  </div>
  <button class="search-bar__btn" type="submit" aria-label="검색">
    <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <circle cx="7.5" cy="7.5" r="5.5" stroke-width="1.5" />
      <line x1="11.5" y1="11.5" x2="16" y2="16" stroke-width="1.5" />
    </svg>
  </button>
</div>

<!-- Disabled -->
<div class="search-bar search-bar--disabled">
  <div class="search-bar__input-wrap">
    <input class="search-bar__input" type="text" placeholder="검색어를 입력하세요." aria-label="검색" disabled />
  </div>
  <button class="search-bar__btn" type="button" aria-label="검색" disabled>...</button>
</div>

Classes

클래스	타입	설명
.search-bar	루트	검색바 래퍼 — 인라인 flex, height 40px
.search-bar--disabled	수정자	비활성 — bg gray-100, 텍스트 gray-400
.search-bar__input-wrap	요소	입력 테두리 박스 — width 200px, border gray-300
.search-bar__input	요소	실제 input — focus 시 부모 wrap 테두리가 error-main으로 변경
.search-bar__btn	요소	검색 버튼 — 40×40px, bg primary-main(green)