Corex.PinInput (Corex v0.1.0-alpha.29)

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>

Learn more about modifiers and Corex Design

Summary

Components

pin_input(assigns)

Components

pin_input(assigns)

Attributes

  • id (:string)
  • value (:list) - Controlled value (list of single chars). Defaults to [].
  • default_value (:list) - Uncontrolled initial value. Defaults to [].
  • controlled (:boolean) - Defaults to false.
  • 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".
  • 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.
  • Global attributes are accepted.

Slots

  • label