메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.2
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색상오류 의미 색상 강조 표시

기본 사용법

입력과 콤보박스 목록을 상대 컨테이너로 래핑합니다. 목록을 표시하려면 래퍼에 combobox-open을 추가하세요. JS 또는 :focus-within을 통해 전환하세요.

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는 필요하지 않습니다.

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 등을 사용하세요. 드롭다운이 자연스럽게 적응됩니다.

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를 래퍼에 추가하세요.

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으로 작성하세요.

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 및 반응 도우미

frutjam/js에서 createCombobox를 사용하거나 frutjam/react에서 useCombobox를 사용하여 필터링, 키보드 탐색(↑ ↓ Enter Escape) 및 전체 aria-* 배선을 즉시 사용할 수 있습니다. 선택을 처리하려면 fj:select 이벤트를 수신하세요.

 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-option" data-value="react">React</li>
    <li class="combobox-option" data-value="vue">Vue</li>
    <li class="combobox-option" data-value="angular">Angular</li>
    <li class="combobox-option" 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를 사용해 보세요