Combobox

Like a text input and a select box had a baby

Includes a Ruby component and corresponding Rails helper

Ruby

Includes a Stimulus controller

Stimulus

Example

<%= nk_combobox "name", %w[mario_kart need_for_speed] %>

Install

Set up Nitro Kit then

bin/rails generate nitro_kit:component combobox

Dependencies

This component adds third-party dependencies:

Rubylucide-railsWeb GitHub
JavaScript@floating-ui/coreWeb GitHub
JavaScript@floating-ui/domWeb GitHub

Form use

To use in forms, it's easiest to use the Form Builder.

For extra convenience use the f.field method.

<%= nk_form_for :high_score do |f| %>
  <%= f.field :game,
          as: :combobox,
          label: "Game",
          placeholder: "Best game ever",
          description: "In which game did you beat the world record again?",
          options: Game.for_select %>
<% end %>

<%= nk_form_for :high_score do |f| %>
  <%= f.field :game_id,
    as: :combobox,
    placeholder: "Best game ever",
    label: "Game",
    description: "In which game did you beat the world record again?",
    options: Game.pluck(:name, :id) %>
<% end %>

Options

Combobox expects an array of [label, value] tuples similar to Rails' options_for_select.

Eventually I would love to add support for async loading results, like autocomplete search or similar.

Usage

NB: Using via f.field is recommended.


`nk_combobox( options: [], placement: nil, tab_inserts_suggestions: nil, first_option_selection_mode: nil, scroll_into_view_options: nil, **args )`
Property	Default	Description
`options`	`[]`	An array of `[label, value]` tuples, like `[["Mario Kart", "mario_kart"], ["Need for Speed", "need_for_speed"]]`
`placement`	`nil`	Floating UI Placement of the dropdown
`tab_inserts_suggestions`	`true`	@github/combobox-nav Docs
`first_option_selection_mode`	`"selected"`	@github/combobox-nav Docs
`scroll_into_view_options`	`{block: "nearest", inline: "nearest"}`	@github/combobox-nav Docs
`**attrs`		HTML attributes for `<input>` element