All components (204)

One-time code

Fields · CodeField

What it is and when to use it

The one-time code: the one for two-step verification, the one that arrives by SMS or email. One box per character, because that is easier to read and dictate, but internally it is a single value.

When to use it

Verifying a phone or an email, signing in with two-factor authentication, confirming an operation.
long (6 by default) and kind: numeric or alphanumeric, which converts letters to uppercase.
onComplete fires as soon as the code is complete, without pressing anything else: that is where the check goes.

When not to

A password: PasswordField.
A discount code: CouponField, which also checks it against the server.
A long code or one without a fixed length (a tracking number, an order number): TextField.

Keyboard: when typing, focus moves on its own to the next box. Backspace clears the box; if it is already empty, it clears the previous one and moves to it. Left and Right Arrow to move around, Home and End to go to the first and the last. Each box is a Tab stop. Pasting into any box distributes the whole code and drops the excess: "A1-B2 C3" is entered as "A1B2C3".

Accessibility: the boxes are a group named after the label, and each one is called "Digit 1 of 6" (changed with checkboxText). The help and the error describe the group, and with an error each box has aria-invalid. The first box has autocomplete="one-time-code" so the phone offers the code from the SMS, and with numeric the numeric keyboard appears.

Fine-tuning: CSS variables --amset-code-width, --amset-code-width-max, --amset-code-height, --amset-code-font and --amset-code-slot. The boxes SHARE the width of their container: they grow up to --amset-code-width-max to fill it —so in a form they line up with the button below— and shrink down to 1.5 rem before overflowing. When they hit the maximum, the group is centered. Filled boxes are highlighted.

What it looks like

We've sent it by SMS to 612 34 56 78

Type or paste the six digits.

<CodeField
  label="Verification code"
  long={6}
  kind="numeric"
  hint="We've sent it by SMS to 612 34 56 78"
  onComplete={comprobar}
/>

Props

Import it with import { CodeField } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	Which code this is. Required: it names the group of boxes.
`autoFocus`	`boolean`	—
`checkboxText`	`(position: number, long: number) => string`	What each checkbox is called for the screen reader.
`className`	`string`	Merged with the library classes; it does not replace them.
`disabled`	`boolean`	—
`error`	`string`	—
`hint`	`string`	—
`initialValue`	`string`	—
`kind`	`CodeKind`	—
`long`	`number`	—
`onChange`	`(code: string) => void`	—
`onComplete`	`(code: string) => void`	Called when the code is completed, without having to press anything else.
`size`	`"sm" \| "md" \| "lg"`	—
`value`	`string`	—
`variant`	`FieldVariant`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: