input_otp

One-time code inputs: a box for each digit of a code sent by email or text message.

input_otp.input_otp(6, [attribute.name("code"), attribute.aria_label("Verification code")])

It is one input drawn as a row of boxes, so pasting a whole code, the phone offering one from a text message, and screen readers all work as they do for any text field. Anything but digits is kept out as it is typed or pasted, so a pasted 123 456 becomes 123456. For codes with letters, pass attribute.attribute("inputmode", "text") and your own pattern; then only spaces are kept out.

Values

classes

</>

pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

frame_class

</>

pub fn frame_class() -> css.Class

grouped

</>

pub fn grouped(
  groups: List(Int),
  attributes: List(attribute.Attribute(msg)),
) -> element.Element(msg)

An input for a code in groups, such as grouped([3, 3], ...) for 123–456: a dash is drawn between the groups. The code itself has no dash; the input holds only its characters.

input_otp

</>

pub fn input_otp(
  length: Int,
  attributes: List(attribute.Attribute(msg)),
) -> element.Element(msg)

An input for a code length characters long.

otp_class

</>

pub fn otp_class() -> css.Class