Combobox

A Popover with a Command inside. It is not a separate component: installing it installs popover and command.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add combobox --yes

The combobox registry item installs these files:

app/components/ui_component.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline) { "Select" } %>
  <%= ui_popover_content(class: "!p-0") do %>
    <%= ui_command do %>
      <%= ui_command_input(placeholder: "Search...") %>
      <%= ui_command_list do %>
        <%= ui_command_item(value: "rails") { "Rails" } %>
      <% end %>

<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline) { "Select" } %>
  <%= ui_popover_content(class: "!p-0") do %>
    <%= ui_command do %>
      <%= ui_command_input(placeholder: "Search...") %>
      <%= ui_command_list do %>
        <%= ui_command_item(value: "rails") { "Rails" } %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Examples

Default

A popover trigger holding a searchable command list.

<%# Combobox = Popover + Command (a composition recipe, not a new component). %>
<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline, class: "w-72 justify-between font-normal") do %>
    Select a framework
    <%= ui_icon("chevrons-up-down", class: "opacity-50") %>
  <% end %>
  <%= ui_popover_content(class: "!p-0") do %>
    <%= ui_command do %>

<%# Combobox = Popover + Command (a composition recipe, not a new component). %>
<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline, class: "w-72 justify-between font-normal") do %>
    Select a framework
    <%= ui_icon("chevrons-up-down", class: "opacity-50") %>
  <% end %>
  <%= ui_popover_content(class: "!p-0") do %>
    <%= ui_command do %>
      <%= ui_command_input(placeholder: "Search frameworks...") %>
      <%= ui_command_list do %>
        <%= ui_command_empty { "No framework found." } %>
        <%= ui_command_group do %>
          <%= ui_command_item(value: "rails") { "Rails" } %>
          <%= ui_command_item(value: "hotwire") { "Hotwire" } %>
          <%= ui_command_item(value: "viewcomponent") { "ViewComponent" } %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>