Corex.PinInput (Corex v0.1.0-beta.3)

View Source

Phoenix implementation of Zag.js Pin Input.

Examples

Basic

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

Styling

Use data attributes to target elements:

[data-scope="pin-input"][data-part="root"] {}
[data-scope="pin-input"][data-part="label"] {}
[data-scope="pin-input"][data-part="control"] {}
[data-scope="pin-input"][data-part="input"] {}

If you wish to use the default Corex styling, you can use the class pin-input on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/pin-input.css";

You can then use modifiers

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

The value assign is the initial cell contents; it is serialized to data-default-value for Zag’s uncontrolled defaultValue.

Summary

Components

pin_input(assigns)

API

clear(pin_input_id)

Clears the pin input from client-side.

clear(socket, pin_input_id)

Clears the pin from the server via a LiveView push.

set_value(pin_input_id, value)

Sets the pin input value from client-side. Returns a Phoenix.LiveView.JS command.

set_value(socket, pin_input_id, value)

Sets the pin value from the server. Pushes a LiveView event handled by the hook.

value(pin_input_id)

Requests the current value from the browser. Returns Phoenix.LiveView.JS.

value(socket, pin_input_id, opts \\ [])

Requests the current value from the client. Pushes pin_input_value for the hook.

Functions

value(pin_input_id, opts)

Components

pin_input(assigns)

Attributes

  • id (:string)
  • value (:list) - Initial value (list of single-character strings). Sent as data-default-value for Zag defaultValue. Defaults to [].
  • count (:integer) - Number of input boxes. Defaults to 4.
  • disabled (:boolean) - Defaults to false.
  • invalid (:boolean) - Defaults to false.
  • required (:boolean) - Defaults to false.
  • read_only (:boolean) - Defaults to false.
  • mask (:boolean) - Defaults to false.
  • otp (:boolean) - Defaults to false.
  • blur_on_complete (:boolean) - Defaults to false.
  • select_on_focus (:boolean) - Defaults to false.
  • name (:string) - Defaults to nil.
  • form (:string) - Defaults to nil.
  • dir (:string) - Defaults to nil.Must be one of nil, "ltr", or "rtl".
  • orientation (:string) - Defaults to "vertical". Must be one of "horizontal", or "vertical".
  • type (:string) - Defaults to "numeric". Must be one of "alphanumeric", "numeric", or "alphabetic".
  • placeholder (:string) - Defaults to "○".
  • on_value_change (:string) - Defaults to nil.
  • on_value_change_client (:string) - Defaults to nil.
  • on_value_complete (:string) - Defaults to nil.
  • translation (Corex.PinInput.Translation) - Override translatable strings. Defaults to nil.
  • errors (:list) - Error messages to display (non-field API). Defaults to [].
  • field (Phoenix.HTML.FormField) - A form field, e.g. f[:code] or @form[:code].
  • Global attributes are accepted.

Slots

  • label - Accepts attributes:
    • class (:string)
  • error - Accepts attributes:
    • class (:string)

API

clear(pin_input_id)

Clears the pin input from client-side.

```javascript
document.getElementById("my-pin")?.dispatchEvent(
  new CustomEvent("corex:pin-input:clear", { bubbles: false })
);
```

clear(socket, pin_input_id)

Clears the pin from the server via a LiveView push.

def handle_event("clear_pin", _params, socket) do
  {:noreply, Corex.PinInput.clear(socket, "my-pin")}
end

set_value(pin_input_id, value)

Sets the pin input value from client-side. Returns a Phoenix.LiveView.JS command.

Pass a list of single-character strings, or a binary: comma-separated cells (e.g. "1,2,,4") or a continuous string whose graphemes fill the fields (e.g. "1234").

From Client JS

```javascript
const el = document.getElementById("my-pin");
el?.dispatchEvent(
  new CustomEvent("corex:pin-input:set-value", {
    bubbles: false,
    detail: { value: ["1", "2", "3", "4"] },
  })
);
```

set_value(socket, pin_input_id, value)

Sets the pin value from the server. Pushes a LiveView event handled by the hook.

def handle_event("fill_pin", _params, socket) do
  {:noreply, Corex.PinInput.set_value(socket, "my-pin", ["1", "2", "3", "4"])}
end

value(pin_input_id)

Requests the current value from the browser. Returns Phoenix.LiveView.JS.

Options: :respond_to — :server (default, pin_input_value_response only), :both, or :client (DOM pin-input-value only).

<.action phx-click={Corex.PinInput.value("my-pin")} class="button button--sm">Value</.action>

```javascript
const el = document.getElementById("my-pin");
el?.addEventListener("pin-input-value", (e) => console.log(e.detail));
```

value(socket, pin_input_id, opts \\ [])

Requests the current value from the client. Pushes pin_input_value for the hook.

def handle_event("pin_input_value_response", %{"id" => id, "value" => value, "valueAsString" => s}, socket) do
  {:noreply, assign(socket, :pin, {id, value, s})}
end

Functions

value(pin_input_id, opts)