Skip to main content
Frutjam logoFrutjam
v2.2.6
Theme

콤보박스 구성요소

마지막 업데이트:

실시간 검색 필터링 및 액세스 가능한 드롭다운 목록이 포함된 CSS 전용 Tailwind CSS 콤보박스입니다. 키보드 탐색, 색상 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

콤보박스는 텍스트 입력과 드롭다운 목록을 결합합니다. 사용 input 필드 구성 요소 — 크기, 색상 및 상태 변형이 여기에서 나옵니다. 그만큼 combobox-* 유틸리티는 드롭다운 목록, 항목 및 열린 상태만 처리합니다.

CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

수업유형설명
combobox-list베이스콤보 상자 옵션의 드롭다운 목록 컨테이너
combobox-item수정자드롭다운 목록 내의 개별 옵션
combobox-open수정자래퍼에 적용될 때 드롭다운 목록을 표시합니다.
combobox-primary색상항목의 기본 테마 색상 강조 표시
combobox-secondary색상항목의 보조 테마 색상 강조 표시
combobox-accent색상항목의 강조 테마 색상 강조 표시
combobox-info색상정보 의미 색상 강조 표시
combobox-success색상성공 의미 색상 강조
combobox-warning색상경고 의미 색상 강조 표시
combobox-error색상오류 의미 색상 강조 표시

기본 사용법

포장 input 그리고 combobox-list 에 relative 컨테이너. 추가하다 combobox-open 목록을 표시하기 위해 래퍼로 — JS를 통해 전환하거나 :focus-within.

  • React
  • Vue
  • Angular
  • Svelte
1
2
3
4
5
6
7
8
9
<div class="relative w-64 combobox-open">
  <input type="text" class="input w-full" placeholder="Search or select...">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
    <li class="combobox-item">Svelte</li>
  </ul>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useCombobox } from 'frutjam/react'

const frameworks = ['React', 'Vue', 'Angular', 'Svelte']

export default function ComboboxDemo() {
  const combo = useCombobox({ items: frameworks })
  return (
    <div {...combo.containerProps} className="relative w-64">
      <input {...combo.inputProps} className="input w-full" placeholder="Search or select..." />
      <ul className="combobox-list" role="listbox">
        {combo.filtered.map((item, i) => (
          <li key={item} {...combo.optionProps(item, i)} className="combobox-item">{item}</li>
        ))}
      </ul>
    </div>
  )
}

집중 시 열기

사용 focus-within:combobox-open 입력에 초점이 맞춰졌을 때 목록을 열려면 래퍼에 있어야 합니다. JavaScript는 필요하지 않습니다.

  • React
  • Vue
  • Angular
  • Svelte
html
1
2
3
4
5
6
7
8
9
<div class="relative w-64 focus-within:combobox-open">
  <input type="text" class="input w-full" placeholder="Focus to open...">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item">Vue</li>
    <li class="combobox-item">Angular</li>
    <li class="combobox-item">Svelte</li>
  </ul>
</div>

크기

사용 input-sm, input-lg등을 입력 필드에 입력합니다. 드롭다운이 자연스럽게 적응됩니다.

  • Banana
  • Mango
  • Papaya
  • Banana
  • Mango
  • Papaya
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="relative w-64 combobox-open">
  <input type="text" class="input input-sm w-full" placeholder="Small">
  <ul class="combobox-list">
    <li class="combobox-item">Banana</li>
    <li class="combobox-item combobox-item-active">Mango</li>
    <li class="combobox-item">Papaya</li>
  </ul>
</div>
<div class="relative w-64 combobox-open">
  <input type="text" class="input input-lg w-full" placeholder="Large">
  <ul class="combobox-list">
    <li class="combobox-item">Banana</li>
    <li class="combobox-item combobox-item-active">Mango</li>
    <li class="combobox-item">Papaya</li>
  </ul>
</div>

그림 물감

사용 input-primary 필드 색상 입력에 대한 등. 일치하는 항목을 추가하세요. combobox-primary 활성 항목 강조 표시에 색조를 적용하기 위해 래퍼에 추가합니다.

  • React
  • Vue
  • Angular
  • React
  • Vue
  • Angular
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="relative w-64 combobox-open combobox-primary">
  <input type="text" class="input input-primary w-full" placeholder="Primary">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
  </ul>
</div>
<div class="relative w-64 combobox-open combobox-error">
  <input type="text" class="input input-error w-full" placeholder="Error">
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
  </ul>
</div>

장애가 있는

html
1
2
3
<div class="relative w-64">
  <input type="text" class="input w-full" placeholder="Disabled" disabled>
</div>

버튼 포함

다음으로 작성 join 검색 아이콘이나 트리거 버튼을 첨부합니다.

🔍
  • React
  • Vue
  • Angular
  • Svelte
html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<div class="relative w-64 combobox-open">
  <div class="join w-full">
    <span class="join-item btn btn-soft">🔍</span>
    <input type="text" class="input join-item" placeholder="Search...">
  </div>
  <ul class="combobox-list">
    <li class="combobox-item">React</li>
    <li class="combobox-item combobox-item-active">Vue</li>
    <li class="combobox-item">Angular</li>
    <li class="combobox-item">Svelte</li>
  </ul>
</div>

링크 또는 버튼으로서의 항목

combobox-item 모든 요소에서 작동 — <li>, <a>, 또는 <button>.

html
1
2
3
4
5
6
7
8
<div class="relative w-64 combobox-open">
  <input type="text" class="input w-full" placeholder="Search pages...">
  <ul class="combobox-list">
    <a href="#" class="combobox-item">Home</a>
    <a href="#" class="combobox-item combobox-item-active">About</a>
    <button class="combobox-item">Contact</button>
  </ul>
</div>

JS 및 반응 도우미

사용 createCombobox ~에서 frutjam/js 또는 useCombobox ~에서 frutjam/react 필터링, 키보드 탐색(↑ ↓ Escape 입력) 및 전체 기능을 얻으려면 aria-* 상자에서 배선. 들어보세요 fj:select 선택을 처리하는 이벤트입니다.

  • React
  • Vue
  • Angular
  • Svelte
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="relative w-64" id="js-combobox">
  <input type="text" class="input w-full" placeholder="Search frameworks...">
  <ul class="combobox-list">
    <li class="combobox-item" data-value="react">React</li>
    <li class="combobox-item" data-value="vue">Vue</li>
    <li class="combobox-item" data-value="angular">Angular</li>
    <li class="combobox-item" data-value="svelte">Svelte</li>
  </ul>
</div>
<script type="module">
  import { createCombobox } from 'frutjam/js'
  const combo = createCombobox(document.getElementById('js-combobox'))
  document.getElementById('js-combobox').addEventListener('fj:select', (e) => {
    console.log('Selected:', e.detail.value)
  })
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { useCombobox } from 'frutjam/react'

const frameworks = [
  { label: 'React', value: 'react' },
  { label: 'Vue', value: 'vue' },
  { label: 'Angular', value: 'angular' },
  { label: 'Svelte', value: 'svelte' },
]

export default function ComboboxDemo() {
  const combo = useCombobox({ items: frameworks })
  return (
    <div {...combo.containerProps} className="relative w-64">
      <input {...combo.inputProps} className="input w-full" placeholder="Search frameworks..." />
      <ul {...combo.listboxProps} className="combobox-list">
        {combo.filtered.map((item, i) => (
          <li key={item.value} {...combo.optionProps(item, i)}>{item.label}</li>
        ))}
      </ul>
    </div>
  )
}

Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?

Cherry MCP는 AI 편집기에 요청 시 정확한 콤보박스 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.

Cherry MCP를 사용해 보세요