Class: BetterUi::Forms::SelectComponent

Inherits:
BaseComponent show all
Defined in:
app/components/better_ui/forms/select_component.rb

Overview

A custom dropdown select component for choosing a single option from a collection.

This component extends BaseComponent to provide a custom select dropdown with keyboard navigation, type-ahead search, and full ARIA support. It uses a hidden input for form submission and a Stimulus controller for interactivity.

Examples:

Basic select

<%= render BetterUi::Forms::SelectComponent.new(
  name: "user[country]",
  collection: [["Italy", "it"], ["France", "fr"], ["Germany", "de"]],
  label: "Country"
) %>

With prefix icon

<%= render BetterUi::Forms::SelectComponent.new(
  name: "country",
  collection: [["Italy", "it"], ["France", "fr"]],
  label: "Country",
  clearable: true
) do |component| %>
  <% component.with_prefix_icon do %>
    <svg class="h-5 w-5 text-gray-400">...</svg>
  <% end %>
<% end %>

Simple array collection

<%= render BetterUi::Forms::SelectComponent.new(
  name: "color",
  collection: ["Red", "Blue", "Green"],
  placeholder: "Pick a color"
) %>

See Also:

Constant Summary

Constants inherited from BaseComponent

BaseComponent::SIZES

Constants inherited from ApplicationComponent

ApplicationComponent::SHADOWS, ApplicationComponent::VARIANTS, ApplicationComponent::VARIANT_BODY_DIVIDE, ApplicationComponent::VARIANT_DIVIDE, ApplicationComponent::VARIANT_HEADER_BG, ApplicationComponent::VARIANT_HEADER_TEXT, ApplicationComponent::VARIANT_HIGHLIGHTED, ApplicationComponent::VARIANT_HOVERABLE, ApplicationComponent::VARIANT_RING, ApplicationComponent::VARIANT_SORT_ICON, ApplicationComponent::VARIANT_STRIPED

Instance Method Summary collapse

Methods inherited from BaseComponent

#call

Constructor Details

#initialize(name:, collection: [], clearable: false, dropdown_classes: nil, value: nil, label: nil, hint: nil, placeholder: nil, size: :md, disabled: false, readonly: false, required: false, errors: nil, shadow: :sm, container_classes: nil, label_classes: nil, input_classes: nil, hint_classes: nil, error_classes: nil, **options) ⇒ SelectComponent

Returns a new instance of SelectComponent.

Parameters:

  • name (String) —

    the name attribute for the hidden input field

  • collection (Array) (defaults to: []) —

    array of values or [label, value] pairs

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

    whether to show a clear button

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

    custom CSS classes for the dropdown

  • name (String) —

    the name attribute for the input field (required for form submission)

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

    the current value of the input field

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

    the label text to display above the input

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

    helpful hint text displayed below the input

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

    placeholder text shown when input is empty

  • size (Symbol) (defaults to: :md) —

    the size variant (:xs, :sm, :md, :lg, :xl), defaults to :md

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

    whether the input should be disabled (non-interactive), defaults to false

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

    whether the input should be readonly (viewable but not editable), defaults to false

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

    whether the field is required (shows asterisk indicator), defaults to false

  • errors (Array<String>, String, nil) (defaults to: nil) —

    validation error messages to display below the input

  • container_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the outer wrapper

  • label_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the label element

  • input_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the input element

  • hint_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the hint text

  • error_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for error messages

  • options (Hash) —

    additional HTML attributes to pass through to the input element



47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
# File 'app/components/better_ui/forms/select_component.rb', line 47

def initialize(
  name:,
  collection: [],
  clearable: false,
  dropdown_classes: nil,
  value: nil,
  label: nil,
  hint: nil,
  placeholder: nil,
  size: :md,
  disabled: false,
  readonly: false,
  required: false,
  errors: nil,
  shadow: :sm,
  container_classes: nil,
  label_classes: nil,
  input_classes: nil,
  hint_classes: nil,
  error_classes: nil,
  **options
)
  @collection = collection
  @clearable = clearable
  @dropdown_classes = dropdown_classes
  super(
    name: name,
    value: value,
    label: label,
    hint: hint,
    placeholder: placeholder,
    size: size,
    disabled: disabled,
    readonly: readonly,
    required: required,
    errors: errors,
    shadow: shadow,
    container_classes: container_classes,
    label_classes: label_classes,
    input_classes: input_classes,
    hint_classes: hint_classes,
    error_classes: error_classes,
    **options
  )
end