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:

Form use

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

For extra convenience use the f.field method.

In which game did you beat the world record again?
    <%= 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
)
    PropertyDefaultDescription
    options[] An array of [label, value] tuples, like [["Mario Kart", "mario_kart"], ["Need for Speed", "need_for_speed"]]
    placementnil Floating UI Placement of the dropdown
    tab_inserts_suggestionstrue @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
    **attrsHTML attributes for <input> element