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 tonil
.- 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
)
Link to this function
input(assigns)
Render input for a form field.
Heavily based on default Phoenix generated CoreComponents
Attributes
field
(Phoenix.HTML.FormField
)id
(:any
) - Defaults tonil
.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
field
(Phoenix.HTML.FormField
) (required)- Global attributes are accepted.
Slots
inner_block
(required)input
- Accepts attributes:class
(:any
)