Glimmer Web Components

April 13, 2026 · View on GitHub

Glimmer Web Components

This is a collection of reusable Glimmer Web Components for Glimmer DSL for Web, extracted from real Rails web applications.

Setup

Add to bundler Gemfile in your Rails web app:

gem 'glimmer-web-components', '0.1.2'

Also, add to config/initializers/assets.rb:

Opal.use_gem 'glimmer-web-components'

Usage

multi checkbox dropdown

Add the following at the top:

require 'glimmer/web/component/multi_checkbox_dropdown'

Then use the multi_checkbox_dropdown Glimmer Web Component in standard Glimmer HTML DSL code.

Simple version with on_change listener:

  ...
  markup {
    div {
      ...
      multi_checkbox_dropdown(values: SomePresenter::STATUS_FILTER_TYPES) {
        on_change do |selected_values|
          # Do something with selected values
        end
      }
      ...
    }
  }
  ...

Simpler (recommended) version with bidirectional data-binding (selected_values are automatically prepopulated from @some_presenter.status_filters and stored back on @some_presenter.status_filters upon user selection):

  ...
  markup {
    div {
      ...
      multi_checkbox_dropdown(values: SomePresenter::STATUS_FILTER_TYPES) {
        selected_values <=> [@some_presenter, :status_filters]
      }
      ...
    }
  }
  ...

Here is the list of defined multi_checkbox_dropdown component options for customization when needed:

        option :values, default: []
        option :display_values
        option :selected_values, default: []
        option :locale, default: :en
        option :translations, default: {}
        option :selected_values_formatter, default: SELECTED_VALUES_FORMATTER_DEFAULT
        option :width, default: 175
        option :height, default: 40
        option :margin, default: '0 15px 0 0'
        option :text_align, default: :center
        option :content_z_index, default: '1000'
        option :content_label_padding_px, default: 10
        option :content_background, default: :white
        option :content_checkbox_size, default: 20
        option :content_checkbox_option_hover_color, default: 'rgb(245, 245, 245)'
        option :content_label_font_size, default: 1.rem

Here is a customized version of consuming the multi_checkbox_dropdown Glimmer Web Component:

  ...
  markup {
    div {
      ...
      multi_checkbox_dropdown(
        values: SomePresenter::STATUS_FILTER_TYPES,
        display_values: SomePresenter::STATUS_FILTER_TYPES.map(&:capitalize),
        locale: I18n.locale,
        width: 190,
        translations: {
          en: {select: 'Filter by Status',
          fr: {select: 'Filtrer par statut'},
          es: {select: 'Filtrar por estado'},
        },
      ) {
        selected_values <=> [@some_presenter, :status_filters]
      }
      ...
    }
  }
  ...