Combobox
Autocomplete input and command palette with a list of suggestions.
Usage
Example
No results found.
Suggestions
Rails World
Tropical.rb
Friendly.rb
Others
RailsConf
Euruko
RubyKaigi
div(class: "w-96") do Combobox do ComboboxInput() ComboboxTrigger do ComboboxValue(placeholder: "Select event...") end ComboboxContent do ComboboxSearchInput(placeholder: "Search event...") ComboboxList do ComboboxEmpty { "No results found." } ComboboxGroup(heading: "Suggestions") do ComboboxItem(value: "railsworld") do span { "Rails World" } end ComboboxItem(value: "tropicalrb") do span { "Tropical.rb" } end ComboboxItem(value: "friendly.rb") do span { "Friendly.rb" } end end ComboboxSeparator() ComboboxGroup(heading: "Others") do ComboboxItem(value: "railsconf") do span { "RailsConf" } end ComboboxItem(value: "euruko") do span { "Euruko" } end ComboboxItem(value: "rubykaigi") do span { "RubyKaigi" } end end end end end end
Copied!
Copy failed!
Components
Component | Built using | Source |
---|---|---|
Combobox | Phlex | |
ComboboxContent | Phlex | |
ComboboxEmpty | Phlex | |
ComboboxGroup | Phlex | |
ComboboxInput | Phlex | |
ComboboxItem | Phlex | |
ComboboxList | Phlex | |
ComboboxSearchInput | Phlex | |
ComboboxSeparator | Phlex | |
ComboboxTrigger | Phlex | |
ComboboxValue | Phlex |
Component | Built using | Source |
---|---|---|
Combobox | Phlex | |
ComboboxContent | Phlex | |
ComboboxEmpty | Phlex | |
ComboboxGroup | Phlex | |
ComboboxInput | Phlex | |
ComboboxItem | Phlex | |
ComboboxList | Phlex | |
ComboboxSearchInput | Phlex | |
ComboboxSeparator | Phlex | |
ComboboxTrigger | Phlex | |
ComboboxValue | Phlex | |
ComboboxContentController | Stimulus JS | |
ComboboxController | Stimulus JS | |
ComboboxItemController | Stimulus JS |