For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.2.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.2.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.2.0/components/combobox.md.
A3S UI
  • 简体中文
  • v0.2.0

      • 组合框

      实时预览

      用途

      Include CSS

      导入 Tailwind 和一个完整的 A3S UI 样式包。

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      或者只导入基本CSS、Combobox组件CSS和一个样式包。

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/combobox.css";
@import "@a3s-lab/ui/styles/a3s.css";

      使用CDN或批量程序导入？请参见安装页。

      Include JavaScript

      复制或提供完整的 A3S UI JavaScript 包。

      <script src="/assets/js/all.min.js" defer></script>

      或者复制或提供 A3S UI 运行时和 Combobox 脚本。

      <script src="/assets/js/runtime.min.js" defer></script>
<script src="/assets/js/combobox.min.js" defer></script>

      使用CDN或批量程序导入？请参见安装页。

      Add your combobox HTML

      组合框是输入优先的。可见输入过滤列表；隐藏输入存储提交的值。

      <div id="framework-combobox" class="combobox w-[240px]">
  <input type="text" role="combobox" placeholder="Select a framework" aria-label="框架" autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" aria-expanded="false" aria-controls="framework-combobox-listbox" /><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="combobox-trigger-icon"><path d="m6 9 6 6 6-6" /></svg>
  <div id="framework-combobox-popover" data-popover aria-hidden="true">
    <div role="listbox" id="framework-combobox-listbox" aria-orientation="vertical" data-empty="No items found.">
      <div role="option" data-value="Next.js">Next.js</div>
      <div role="option" data-value="SvelteKit">SvelteKit</div>
      <div role="option" data-value="Nuxt.js">Nuxt.js</div>
      <div role="option" data-value="Remix">Remix</div>
      <div role="option" data-value="Astro">Astro</div>
    </div>
  </div>
  <input type="hidden" name="framework" value="" />
</div>

      HTML 结构

      <div class="combobox">

      Root element. Add data-auto-highlight="true" to make the first visible option active when the list opens or filters. Add data-format="object" to serialize selected values as objects. Add data-filter="manual" when your app owns filtering.

      <input type="text" role="combobox">
      The editable control. It can be a direct child, inside .input-group, or inside data-popover for popup mode.
      <button aria-haspopup="listbox"> Optional
      Opens the list from an input group or popup trigger. In popup mode, include a child with data-value and optional data-placeholder to display the selected value.
      <button data-clear> Optional
      Clears the current selection. Put the clear icon inside the button.
      <svg class="combobox-trigger-icon"> Optional
      Decorative trailing icon for input-style comboboxes. Replace the SVG to customize the icon.
      <div data-popover>
      The suggestions popup. Use data-side and data-align like Popover; the shared runtime flips and clamps the list to the visual viewport.
      <div role="listbox">
      The suggestions list. Add aria-multiselectable="true" in multiple mode. The component uses that attribute to render selected chips around the input.
      <div role="option" data-value="...">
      Selectable option. Options can contain custom HTML; use data-label when the input should display different text than the rendered content.
      <input type="hidden">
      Submitted value. Single mode stores a string; multiple mode stores a JSON array. With data-format="object", selected values are stored as objects.

      JavaScript API

      应用程序编程接口类型描述
      change活动在 event.detail.value 和 event.detail.selected 的选择发生更改时调度。
      combobox.setValue(value)方法从普通值或 { value, label } 对象设置选定值。
      combobox.clear()方法清除选定的值。
      combobox.refresh()方法在现有 role="listbox" 元素内的子项发生更改后重新扫描选项。

      示例

      多个

      实时预览

      清除按钮

      实时预览

      组

      实时预览

      定制项目

      实时预览

      无效

      实时预览

      Select a framework to continue.

      已禁用

      实时预览

      自动高亮

      当列表打开或筛选时，自动突出显示使第一个可见选项处于活动状态，因此按 Enter 键可以选择它，而无需先使用箭头。

      实时预览

      弹出

      实时预览

      输入组

      实时预览

      RTL

      实时预览