# `FrappeUIPhx.Components.PinCode`
[🔗](https://github.com/moacirbishopcamata/frappe_ui_phx/blob/v0.3.1/lib/frappe_ui_phx/components/pin_code.ex#L1)

Código de verificação / PIN: uma caixa por caractere, com avanço automático,
Backspace que volta, setas, colar o código inteiro e preenchimento por SMS
(`autocomplete="one-time-code"`).

O valor é **um único campo** (`name` do `field`, ou `name` avulso) com o código
completo; as caixas não têm `name`, então nada parcial é enviado. Aceita
`field={@form[:codigo]}` (valor e erros do changeset) e funciona dentro de um
`phx-change`/`phx-submit`. Com `on_complete="evento"` o servidor recebe
`%{"id" => id, "value" => código}` assim que todas as caixas são preenchidas.

    <.pin_code id="otp" field={@form[:codigo]} length={6} on_complete="verificar" />

`type`: `:numeric` (padrão, teclado numérico) ou `:alphanumeric`. `mask` esconde
os caracteres (como senha). O que o navegador envia continua sendo entrada de
usuário: valide o código no servidor (`sanitize/2` aplica a mesma regra do cliente).

# `cells`

```elixir
@spec cells(term(), pos_integer(), :numeric | :alphanumeric) :: [String.t()]
```

Caracteres por caixa: o valor limpo, cortado em `length` e completado com `""`.

# `pin_code`

## Attributes

* `field` (`Phoenix.HTML.FormField`) - Defaults to `nil`.
* `id` (`:any`) - Defaults to `nil`.
* `name` (`:any`)
* `value` (`:any`)
* `length` (`:integer`) - quantidade de caracteres (3..12). Defaults to `6`.
* `type` (`:atom`) - Defaults to `:numeric`. Must be one of `:numeric`, or `:alphanumeric`.
* `mask` (`:boolean`) - esconde os caracteres, como uma senha. Defaults to `false`.
* `on_complete` (`:string`) - evento enviado ao servidor com o código quando todas as caixas estão preenchidas. Defaults to `nil`.
* `variant` (`:atom`) - Defaults to `:subtle`. Must be one of `:subtle`, `:outline`, or `:ghost`.
* `size` (`:atom`) - Defaults to `:md`. Must be one of `:xs`, `:sm`, `:md`, or `:lg`.
* `errors` (`:list`) - Defaults to `[]`.
* `disabled` (`:boolean`) - Defaults to `false`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted. Supports all globals plus: `["autofocus", "form"]`.

# `sanitize`

```elixir
@spec sanitize(term(), :numeric | :alphanumeric) :: String.t()
```

Mantém só os caracteres aceitos pelo `type` (`:numeric` ou `:alphanumeric`).
Mesma regra do hook no cliente; use no servidor para validar o código recebido.

---

*Consult [api-reference.md](api-reference.md) for complete listing*