Headless (headless v0.1.0)

Summary

Functions

Combobox (select + search) component.

Render input for a form field.

Toggle (switch) component.

Functions

Link to this function

combobox(assigns)

Combobox (select + search) component.

This component is built from the ground up to be compatible with Phoenix LiveView including dynamicly changing the list of options. Under the hood this component uses a hidden input to store the selected value to ensure seamless integration with Phoenix forms. Options are rendered server-side using :option slot. The client-side dropdown and search functionality is provided by Alpine.js operating directly on the rendered DOM.

Features supported:

  • Client-side search
  • Keyboard navigation (arrows)
  • Keyboard selection (enter)
  • Mouse selection (click)

Example:

<.combobox field={form[:user_id]} options={@users} value={&1 &1.id} searchkey={& [&1.name, &1.email]}>
  <:selected :let={user}><%= user.name %></:selected>
  <:option :let={user}><%= user.name %> - <%= user.email %></:option>
</.combobox>

Attributes

  • field (Phoenix.HTML.FormField)
  • options (:list)
  • value (:any) - Function returning value for option.
  • searchkey (:any) - Function returning search key for option.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • selected - Slot rendering the selected option. Accepts attributes:
    • class (:any)
  • option - Slot rendering option inside the panel.
  • placeholder - Placeholder shown when no option is selected. Accepts attributes:
    • class (:any)
  • button - Button that opens the panel. Accepts attributes:
    • class (:any)
  • search - Search input. Accepts attributes:
    • class (:any)
    • placeholder (:string)
  • panel - Container for options. Accepts attributes:
    • class (:any)

Render input for a form field.

Heavily based on default Phoenix generated CoreComponents

Attributes

  • field (Phoenix.HTML.FormField)
  • id (:any) - Defaults to nil.
  • name (:any)
  • value (:any)
  • type (:string) - Defaults to "text".
  • checked (:boolean) - the checked flag for checkbox inputs.
  • Global attributes are accepted.

Slots

  • inner_block
Link to this function

toggle(assigns)

Toggle (switch) component.

Uses regular checkbox input under the hood.

Example:

<.toggle field={form[:is_admin]}/>

Attributes

Slots

  • inner_block (required)
  • input - Accepts attributes:
    • class (:any)