PhiaUi.Components.WheelPicker (phia_ui v0.1.17)

Drum roll / iOS-style scroll wheel picker component.

Each column shows 5 visible items at a time: the center item is the selected value (large, bold, full opacity). Adjacent rows are progressively smaller and more transparent, and gradient overlays at the top and bottom create the classic drum-wheel illusion. Zero JavaScript — all state is managed server-side.

Column map keys

Each entry in columns must be a map with:

Key	Type	Description
`:name`	string	Column identifier (used in events)
`:items`	list	All selectable string values
`:selected`	string	Currently selected value

Clicking a non-selected visible item fires the on_change event with phx-value-column (column name) and phx-value-value (new value).

Examples

<%!-- Single-column month picker --%>
<.wheel_picker
  columns={[%{name: "month", items: @months, selected: @month}]}
  on_change="month_changed"
/>

<%!-- Multi-column date picker --%>
<.wheel_picker
  columns={[
    %{name: "month", items: @months, selected: @month},
    %{name: "day",   items: @days,   selected: @day},
    %{name: "year",  items: @years,  selected: @year}
  ]}
  on_change="date_changed"
/>

Summary

Functions

wheel_picker(assigns)

Renders an iOS-style drum-roll wheel picker.

Functions

wheel_picker(assigns)

Renders an iOS-style drum-roll wheel picker.

Attributes

columns (required) — list of column maps, each with :name, :items, and :selected keys.
on_change — LiveView event name fired when a non-selected item is clicked. The event receives phx-value-column and phx-value-value.
separator — when true (default) a vertical divider line separates adjacent columns via Tailwind's divide-x utility.
class — additional CSS classes merged onto the wrapper element.
rest — any other HTML attributes forwarded to the root <div>.

Attributes

columns (:list) (required) - List of column maps (%{name:, items:, selected:}).
on_change (:string) - LiveView event name for column value changes. Defaults to nil.
separator (:boolean) - Show divider line between columns (divide-x). Defaults to true.
class (:string) - Additional CSS classes applied to the wrapper. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root element.