Pin Input

Event

Subscribe to value changes from the server or a DOM listener.

On Value Change (Server)

Code

Time	Source	Value
No event yet. Interact with the components to receive new events

    <.pin_input
  count={4}
  class="pin-input"
  on_value_change="pin_input_changed"
>
  <:label>Code</:label>
</.pin_input>

    def handle_event("pin_input_changed", %{"id" => id, "value" => value} = params, socket) do
  IO.inspect(params, label: "pin_input_changed")
  {:noreply, socket}
end

On Value Change (Client)

Code

Time	Source	Value
No event yet. Interact with the components to receive new events

    <.pin_input
  count={4}
  class="pin-input"
  on_value_change_client="pin-input-changed"
>
  <:label>Code</:label>
</.pin_input>

    const el = document.getElementById("pin-input-events-client");
el?.addEventListener("pin-input-changed", (event) => console.log(event.detail));

    const el = document.getElementById("pin-input-events-client");
el?.addEventListener("pin-input-changed", (event: Event) =>
  console.log((event as CustomEvent<unknown>).detail)
);