DevactionUI.Combobox (devaction_ui v0.1.0)

Copy Markdown View Source

A select with a search box: the button shows the choice, the panel has a field that filters the list while you type (ignoring case and accents), ↑ ↓ move, Enter chooses, Esc closes, and an empty result says so. The value goes in a hidden input named name, and the hook fires input on it so phx-change hears it. Options are %{value: ..., label: ..., hint: ...}; hint is a small mono text at the right.

Written as the ARIA combobox pattern: the field keeps focus and points at the active option with aria-activedescendant.

Summary

Functions

combobox(assigns)

Attributes

  • id (:string) (required)
  • name (:string) (required)
  • options (:list) (required)
  • value (:string) - Defaults to nil.
  • label (:string) (required) - what is being chosen, for assistive technology.
  • placeholder (:string) (required) - shown on the button when nothing is chosen.
  • search_placeholder (:string) (required)
  • empty (:string) (required) - shown when the search finds nothing.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.