Combobox
A text input that filters a list of options, choosing one or several, with the list served from a collection or fetched as you type. The ARIA combobox pattern, with the list in the top layer so nothing clips it.
One of a list
Type to filter; arrow keys move, Enter chooses, Escape restores. The value is a hidden input, so a form submitted before script loads keeps it.
<%= form_with model: @profile, url: "#", builder: Unmagic::Components::FormBuilder, class: "max-w-md" do |form| %>
<%= form.field :role, "Owner", as: :combobox, collection: @things, text: :name, placeholder: "Pick someone", hint: "One of the team." %>
<% end %>Several, as chips
multiple: true submits name[] with a chip per choice; Backspace on an empty input removes the last.
- Bug
- Feature
Bug
Chore
Feature
Docs
No matches
<div class="max-w-md">
<%= combobox_tag "label_ids", collection: [ [ 1, "Bug" ], [ 2, "Chore" ], [ 3, "Feature" ], [ 4, "Docs" ] ], value: :first, text: :last, multiple: true, selected: [ 1, 3 ], placeholder: "Add a label", label: "Labels", id: "labels" %>
</div>Fetched as you type
src: points at an action answering ?q= with combobox_results, rendered into the list's frame. Try "ada" or "hopper".
This example talks to a server
These are static pages, so what this example saves, posts or searches for won't answer here. Run the browser
(
bin/dev) or mount it in an app to try it for real.
No matches
Searching…
<div class="max-w-md">
<%= combobox_tag "assignee_id", collection: [], text: :name, src: search_things_path, placeholder: "Search the team", label: "Assignee", id: "assignee" %>
</div>