Forms.input_otp · Cinder UI

`Forms.input_otp`

Progressive

Renders an OTP-style segmented input layout.

This component renders one input per position and can be wired using standard Phoenix input names such as code[]. The bundled CuiInputOtp hook adds auto-advance, backspace-to-previous, and paste distribution behavior.

Basic OTP input

  <.input_otp name="verification_code[]" length={6} />

With grouped separators

  <.input_otp name="backup_code[]" length={6} groups={[3, 3]} values={["1", "2", "3", "4", "5", "6"]} />

With FormField (string value is split into individual cells)

Phoenix shim

  <.input_otp field={@form[:code]} length={6} />

With label

Phoenix shim

Verification code

  <.input_otp field={@form[:code]} label="Verification code" length={6} />

With explicit errors

Phoenix shim

Verification code

is invalid

  <.input_otp field={@form[:code]} label="Verification code" errors={["is invalid"]} length={6} />

Inside field composition

Phoenix shim

Verification code

Enter the 6-digit code from your email.

  <.field>
  <:label for={@form[:code].id}>Verification code</:label>
  <.input_otp field={@form[:code]} length={6} />
  <:description>Enter the 6-digit code from your email.</:description>
</.field>

Attributes

Name	Type	Default	Values	Global Includes
`class`	`:string`	—	—	—
`errors`	`:list`	—	—	—
`field`	`{:struct, Phoenix.HTML.FormField}`	—	—	—
`groups`	`:list`	`[]`	—	—
`id`	`:string`	—	—	—
`input_class`	`:string`	—	—	—
`label`	`:string`	—	—	—
`length`	`:integer`	`6`	—	—
`name`	`:string`	`"code[]"`	—	—
`rest`	`:global`	—	—	—
`values`	`:list`	`[]`	—	—

Slots

No slots declared.