Class: Shadcn::ComboboxComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/shadcn/combobox_component.rb

Overview

Combobox component - autocomplete input with searchable dropdown Composes Popover and Command components for a searchable select

Examples:

Basic combobox

<%= render Shadcn::ComboboxComponent.new(
  items: [
    { value: "next", label: "Next.js" },
    { value: "remix", label: "Remix" },
    { value: "rails", label: "Ruby on Rails" }
  ],
  placeholder: "Select framework...",
  search_placeholder: "Search framework..."
) %>

With selected value

<%= render Shadcn::ComboboxComponent.new(
  items: frameworks,
  value: "rails",
  placeholder: "Select framework..."
) %>

With name for form submission

<%= render Shadcn::ComboboxComponent.new(
  items: frameworks,
  name: "project[framework]",
  placeholder: "Select framework..."
) %>

Constant Summary collapse

TRIGGER_CLASSES = 
"w-[200px] justify-between"
POPOVER_CONTENT_CLASSES = 
"w-[200px] p-0"
CHEVRON_CLASSES = 
"ml-2 h-4 w-4 shrink-0 opacity-50"
CHECK_CLASSES = 
"mr-2 h-4 w-4"

Instance Attribute Summary

Attributes inherited from BaseComponent

#class_name, #data, #html_options

Instance Method Summary collapse

Methods inherited from BaseComponent

#content

Methods included from Rails::Helpers::ClassNameHelper

#cn

Constructor Details

#initialize(items: [], value: nil, placeholder: "Select option...", search_placeholder: "Search...", empty_text: "No results found.", name: nil, disabled: false, width: "w-[200px]", **options) ⇒ ComboboxComponent

Returns a new instance of ComboboxComponent.

Parameters:

  • items (Array<Hash>) (defaults to: []) —

    Array of items with :value and :label keys

  • value (String, nil) (defaults to: nil) —

    Currently selected value

  • placeholder (String) (defaults to: "Select option...") —

    Placeholder text when no value selected

  • search_placeholder (String) (defaults to: "Search...") —

    Placeholder text for search input

  • empty_text (String) (defaults to: "No results found.") —

    Text shown when no results found

  • name (String, nil) (defaults to: nil) —

    Form field name for hidden input

  • disabled (Boolean) (defaults to: false) —

    Whether the combobox is disabled

  • width (String) (defaults to: "w-[200px]") —

    Width class for the component



46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
# File 'app/components/shadcn/combobox_component.rb', line 46

def initialize(
  items: [],
  value: nil,
  placeholder: "Select option...",
  search_placeholder: "Search...",
  empty_text: "No results found.",
  name: nil,
  disabled: false,
  width: "w-[200px]",
  **options
)
  super(**options)
  @items = items
  @value = value
  @placeholder = placeholder
  @search_placeholder = search_placeholder
  @empty_text = empty_text
  @name = name
  @disabled = disabled
  @width = width
end

Instance Method Details

#call ⇒ Object 



68
69
70
 
# File 'app/components/shadcn/combobox_component.rb', line 68

def call
  content_tag(:div, combobox_content, **combobox_attributes)
end