Components

OTP Input

Split boxes for entering a one-time passcode.

Usage

Basic

HTML

<bs:bsui-otp-input length="6" />

Four digits

A shorter code, with the separator falling in the middle.

HTML

<bs:bsui-otp-input name="pin" length="4" />

Labelled field

Help text tells the reader where the code was sent.

Verification code

We sent a six digit code to your phone.

HTML

<bs:bsui-field>
  <bs:bsui-field-label text="Verification code" />
  <bs:bsui-otp-input name="code" length="6" />
  <bs:bsui-field-description text="We sent a six digit code to your phone." />
</bs:bsui-field>

Disabled

Every cell stops accepting input while a resend is in flight.

HTML

<bs:bsui-otp-input length="6" disabled="true" />

Attributes

Attribute	Type	Default
`name`	`text`	—
`length`	`number`	`6`
`disabled`	`toggle`	`false`
`nameAlt`	`text`	—
`onChange`	`text`	—