---
title: "One-time-code field"
description: "Asks for a short code sent to the person as one complete field — the cells under a label, with a line of help and the words for a wrong code — tied together for assistive technology and taking part in a form as one control."
url: "https://tanrei.chnotchy.com/components/one-time-code-field/"
last_updated: 2026-10-23T21:17:12.000Z
---

# One-time-code field

> Asks for a short code sent to the person as one complete field — the cells under a label, with a line of help and the words for a wrong code — tied together for assistive technology and taking part in a form as one control.

## Overview

Use a one-time-code field wherever a product asks back a short code it sent: to sign in, to confirm an address or a telephone number, to approve a payment. It is the ordinary case, ready to use: a label, the cells, a line that says where the code was sent, and the words for a wrong code.

**Built from** a [field](https://tanrei.chnotchy.com/components/field/) and a [one-time-code input](https://tanrei.chnotchy.com/components/one-time-code-input/). The field is the frame: the label, the required or optional mark, the help and the error. The one-time-code input is the control: the cells and everything a person does in them. The one-time-code field draws nothing of its own and has no token: every property it has is a property of one of the two, given to it unchanged.

It is as wide as the place it is put in, and the cells start at its start edge.

On the web it is `<tanrei-one-time-code-field>`. The other platforms have not implemented it yet.

### Usage

`value` is the code entered so far, with no separator, whatever the groups drawn. The four events are the one-time-code input’s own, and when any of them is heard the field’s `value` is already the new one.

**Web**

```html
<form>
  <tanrei-one-time-code-field name="code" label="Verification code"
    supporting-text="Enter the 6-digit code we sent to your phone."
    error-text="That code is not right. Check the message and try again."
    required required-text="Required"
    group-size="3"></tanrei-one-time-code-field>
</form>

<script type="module">
  import '@tanrei/web/components/one-time-code-field';

  const code = document.querySelector('tanrei-one-time-code-field');
  // The person changed the value. It is already the new one.
  code.addEventListener('input', () => (code.error = false));
  // The last cell was filled, or a whole code was pasted or filled. Nothing else happens by itself.
  code.addEventListener('complete', async (e) => {
    code.readOnly = true;
    const right = await verify(e.detail.value);
    code.readOnly = false;
    code.error = !right;
  });
</script>
```

**React**

```tsx
import { OneTimeCodeField } from '@tanrei/react';

<OneTimeCodeField name="code" label="Verification code" error={wrong}
  supportingText="Enter the 6-digit code we sent to your phone."
  errorText="That code is not right. Check the message and try again."
  groupSize={3} value={code}
  onInput={(event) => setCode(event.currentTarget.value)}
  onComplete={(event) => verify(event.detail.value)} />
```

### One level down

The same field, written by hand from its two members, is the same picture and the same text box to assistive technology:

```html
<tanrei-field label="Verification code"
  supporting-text="Enter the 6-digit code we sent to your phone."
  error-text="That code is not right. Check the message and try again.">
  <tanrei-one-time-code-input name="code" group-size="3"></tanrei-one-time-code-input>
</tanrei-field>
```

Go one level down when you need an arrangement the one-time-code field does not offer:

| You need | Use |
| --- | --- |
| A label, the cells, help and an error | The one-time-code field |
| Something of your own inside the frame, beside the cells — a control to send the code again, a countdown | A [field](https://tanrei.chnotchy.com/components/field/) with a [one-time-code input](https://tanrei.chnotchy.com/components/one-time-code-input/) and your own element in it |
| The cells alone, under a label that is drawn elsewhere — a dialog’s headline, a step’s title | The [one-time-code input](https://tanrei.chnotchy.com/components/one-time-code-input/) alone, named by its own `label` |
| One box without cells, for a code whose length is not known | A [text field](https://tanrei.chnotchy.com/components/text-field/) with `autocomplete="one-time-code"` |

What changes one level down is where things are said. `name` and `value` are on the one-time-code input, which is then the control the form meets, and its events are heard on it. `label`, `error` and `disabled` stay on the field, which passes them to the control: do not set the input’s own.

## Specs

### What each member gives

| Aspect | From the field | From the one-time-code input |
| --- | --- | --- |
| Properties | `label`, `labelHidden`, `supportingText`, `errorText`, `error`, `disabled`, `required`, `optional`, `requiredMark`, `requiredText`, `optionalText` | `value`, `length`, `type`, `groupSize`, `mask`, `readOnly` |
| Events | — | `input`, `change`, `complete`, `action` |
| Slots | `label-icon` | — |
| Tokens | `comp.field.*` | `comp.one-time-code-input.*` |

The one-time-code input has a `label`, an `error` and a `disabled` of its own. They are not properties of the one-time-code field: the field’s `label` names the control, its `error` puts the cells in their error condition and its `disabled` disables them. So you set each of them once, on the one-time-code field, and its label changes with the control.

What the cells do — typing, pasting, the arrow keys, the groups — is on the [one-time-code input’s page](https://tanrei.chnotchy.com/components/one-time-code-input/). What the frame does — the required mark, the help, the error and how it is announced — is on the [field’s page](https://tanrei.chnotchy.com/components/field/).

### Setting one field apart

The one-time-code field has no token of its own. Its frame reads the field’s tokens and its cells the one-time-code input’s, wherever they are set. To change one instance, set the member’s token on it:

```html
<tanrei-one-time-code-field label="Verification code"
  style="--tanrei-comp-field-label-gap: 12px"></tanrei-one-time-code-field>
```

- Category: Text inputs
- Level: composed
- Listing: default
- Built from: Field, One-time-code input
- Page: https://tanrei.chnotchy.com/components/one-time-code-field/
- Spec: https://github.com/chnotchy/tanrei/blob/main/specs/one-time-code-field.spec.json

### Availability

| Design system | Has it | Notes |
| --- | --- | --- |
| Tanrei (`tanrei`) | Yes | — |
| Cupertino (Apple HIG-inspired) (`cupertino`) | Yes | — |
| M3 Expressive-like (Material 3 Expressive-inspired) (`m3-expressive-like`) | Yes | — |
| M3-like (Material 3-inspired) (`m3-like`) | Yes | — |

### Platforms

- Web: the element `<tanrei-one-time-code-field>`, registered by importing `@tanrei/web` (or only its own module, `@tanrei/web/components/one-time-code-field`).
- React: `OneTimeCodeField` from `@tanrei/react`.

| Platform | Name | Status |
| --- | --- | --- |
| Web | `tanrei-one-time-code-field` | lagging |
| SwiftUI | `TanreiOneTimeCodeField` | planned |
| Jetpack Compose | `TanreiOneTimeCodeField` | planned |
| Flutter | `TanreiOneTimeCodeField` | planned |
| React Native | `OneTimeCodeField` | planned |

Names a platform gives in its own idiom:

| Spec | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
| --- | --- | --- | --- | --- | --- |
| `label` (prop) | `label` | `label` | `label` | `labelText` | `label` |
| `labelHidden` (prop) | `labelHidden` | `labelsHidden` | `labelHidden` | `labelHidden` | `labelHidden` |
| `supportingText` (prop) | `supportingText` | `supportingText` | `supportingText` | `helperText` | `supportingText` |
| `error` (prop) | `error` | `error` | `isError` | `isError` | `error` |
| `disabled` (prop) | `disabled` | `disabled` | `enabled` | `enabled` | `disabled` |
| `required` (prop) | `required` | `isRequired` | `required` | `required` | `required` |
| `optional` (prop) | `optional` | `isOptional` | `optional` | `optional` | `optional` |
| `value` (prop) | `value` | `code` | `value` | `controller` | `value` |
| `mask` (prop) | `mask` | `isMasked` | `masked` | `obscureText` | `secureTextEntry` |
| `input` (event) | `input` | `code` | `onValueChange` | `onChanged` | `onChangeText` |
| `change` (event) | `change` | `onCommit` | `onCommit` | `onCommit` | `onEndEditing` |
| `complete` (event) | `complete` | `onComplete` | `onComplete` | `onCompleted` | `onComplete` |
| `action` (event) | `action` | `onSubmit` | `keyboardActions` | `onSubmitted` | `onSubmitEditing` |

Statuses: `planned` — In the inventory. Nothing shippable exists yet. `lagging` — An implementation of an earlier spec exists; it has not caught up with the current one. `alpha` — Implemented with tests. The API may still change. `beta` — Feature complete and at parity. Only fixes are expected. `stable` — Covered by semantic versioning. `deprecated` — Still shipped; scheduled for removal.

### Anatomy

- `field`: The frame: a Field, whole — its label row with the label glyph and the requirement mark, and its supporting row, where the error text stands in the help's place or below it (FLD-7). Drawn by the Field from the Field's tokens (FLD-1 to FLD-9).
- `one-time-code-input`: The frame's one control: a One-time-code input, whole — its cells, its characters, its caret and its group marks. Drawn by the One-time-code input from its own tokens (OTC-1 to OTC-3, OTC-15).

### Props

| Prop | Type | Default | Web attribute | Description |
| --- | --- | --- | --- | --- |
| `label` | `string` | `""` | `label` | Names the control, visibly and to assistive technology. Required, unless the control names itself (a checkbox or a switch with its own label): then leave it empty and the field adds only help and an error. (From Field: Always given: the control of a one-time-code field never names itself, so the case of an empty label does not arise.) |
| `labelHidden` | `boolean` | `false` | `label-hidden` | Does not draw the label, which stays the accessible name. For a control whose visible label is elsewhere (a table column, a toolbar). (From Field.) |
| `supportingText` | `string` | `""` | `supporting-text` | Help shown below the control and given to assistive technology as the control's description. While the field is in error it gives way to errorText, unless the design system keeps both (comp.field.error-text.placement append). (From Field.) |
| `errorText` | `string` | `""` | `error-text` | Shown while error is true, in supportingText's place — or below it, which then stays, where the design system's comp.field.error-text.placement is append: what is wrong and how to put it right, in words. (From Field.) |
| `error` | `boolean` | `false` | `error` | Puts the field in the error condition: the error text is drawn, the control is exposed as invalid and, where it has an error condition of its own, drawn in it. What a value means is the product's to validate; the field never sets this itself. (From Field: The one error of the one-time-code field: the Field passes it to the control (FLD-8, OTC-17), whose own error is not a prop here.) |
| `disabled` | `boolean` | `false` | `disabled` | Disables the control and draws the frame as disabled. Disable a framed control here, not on the control, so that its label follows. (From Field: The one disabled of the one-time-code field: the Field passes it to the control (FLD-14, OTC-20), whose own disabled is not a prop here.) |
| `required` | `boolean` | `false` | `required` | What the form asks of the control: true exposes it as required and draws the required mark beside the label. It never validates: a missing answer is the product's to report with error. (From Field.) |
| `optional` | `boolean` | `false` | `optional` | Draws the optional tag after the label and adds optionalText to the control's description, because assistive technology has no state for it. Ignored while required is true: a control is never both. (From Field.) |
| `requiredMark` | `enum`: `auto`, `tag`, `asterisk`, `none` | `"auto"` | `required-mark` | How this control shows that it is required: tag is a small filled Tag with requiredText, asterisk is "*" after the label, none draws nothing and keeps the semantics. Auto takes comp.field.requirement.mark, which follows sys.behavior.requirement-mark, the system's one answer. Ignored unless required is true. (From Field.) |
| `requiredText` | `string` | `""` | `required-text` | The text of the required tag, in the product's language ("Required", "必須"). The product's: Tanrei has no word for it. Empty reads the product's words; with neither, FLD-24 says what is drawn. (From Field.) |
| `optionalText` | `string` | `""` | `optional-text` | The text of the optional tag, in the product's language ("Optional", "任意"); also read to assistive technology as part of the description. The product's: Tanrei has no word for it. Empty reads the product's words. (From Field.) |
| `value` | `string` | `""` | `value` | The code entered so far: at most length characters, digits or, for alphanumeric, digits and upper-case letters, with no separator. One string, whatever the cells and groups drawn. (From One-time-code input.) |
| `length` | `number` | `6` | `length` | How many characters the code has, and so how many cells are drawn. A whole number of 1 or more. (From One-time-code input.) |
| `type` | `enum`: `numeric`, `alphanumeric` | `"numeric"` | `type` | What a cell takes: numeric is the digits 0 to 9, with a numeric keypad; alphanumeric is digits and the letters A to Z, held in upper case, with a general keyboard. (From One-time-code input.) |
| `groupSize` | `number` | `0` | `group-size` | Draws the cells in groups of this many, counted from the first, with a mark between two groups (3 for a six-character code written "123 456"). 0 draws one group. It changes the drawing only: the value has no separator. (From One-time-code input.) |
| `mask` | `boolean` | `false` | `mask` | Draws the platform's obscuring mark in each filled cell in place of its character, and exposes the field as protected. For a screen other people can see; a code that is used once and expires rarely needs it. (From One-time-code input.) |
| `readOnly` | `boolean` | `false` | `readonly` | Keeps the field focusable and its value readable, and lets nothing change it: for the moment a complete code is being checked, when taking focus away would lose the place of a person who must then correct it. (From One-time-code input.) |

### Events

| Event | Description |
| --- | --- |
| `input` | The person changed the value; carries the new value. Emitted for every change, not when the product sets value. (From One-time-code input.) |
| `change` | The person committed a changed value (focus left the field, or the action key was pressed); carries the value. (From One-time-code input.) |
| `complete` | A change by the person left the value length characters long; carries the value. Emitted after input, once for that change. The field does nothing else: checking the code is the product's. (From One-time-code input.) |
| `action` | The person pressed the keyboard's action key (Enter, Return, Done). (From One-time-code input.) |

### Slots

| Slot | Description |
| --- | --- |
| `label-icon` | A glyph before the label. (From Field.) |

### States

`enabled`, `disabled`, `hovered`, `focused`, `error`

### Accessibility

- Role: `textbox`
- Labeling: One text box, the One-time-code input's (OTC-2); the frame has no role. Its accessible name is label, drawn or not (labelHidden), and its description is the supporting text with, in error, the error text after it, with optionalText while optional is true (FLD-10, FLD-11, OTC-22). It is exposed as invalid while error is true, required while required is true, disabled while disabled is true, read-only while readOnly is true, and as a protected text entry while mask is true. The label's drawn text, the requirement mark, the cells, the caret and the group marks are not exposed a second time (FLD-11, OTC-2).
- Minimum target size: yes

| Keys | Action |
| --- | --- |
| Tab / Shift+Tab | Moves focus to the control and on from it: the one-time-code field is one stop, its control's, and adds none (OTF-5). |
| Every other key | The One-time-code input's own, as its spec's keyboard table says (OTC-6, OTC-8 to OTC-11, OTC-13). The one-time-code field handles no key. |

- What the one-time-code field adds to its members is their being one thing: one tag or one call, one set of props, one value and one entry in a form (OTF-2 to OTF-4). The tie between the two — the name, the description, required, invalid, disabled — is not the one-time-code field's: it is what a Field gives any control it frames, and it runs here exactly as it runs in a product's own Field.
- One level down: a Field with a One-time-code input in it, written by the product, is the same picture and the same text box, and the Field's fixtures code-supporting, code-error, code-disabled and code-required-rtl are this component's twins. A product drops to it for an arrangement the one-time-code field does not offer: something of its own inside the frame beside the cells (a resend control, a countdown), or the One-time-code input alone under a dialog's headline, named by its own label.
- The members' notes hold as written and are not repeated: errors are words (the Field's); nothing happens by itself when the code is complete, and paste and the platform's autofill are never blocked (the One-time-code input's).
- The hit area is the control's (OTC-25); the label widens where a press can land without widening what a press does (FLD-12).
- Not pressable: a press focuses the control and is not an action (OTC-25), so BTN-8, BTN-9 and BTN-10 are not copied.
- How a state looks is a value decision of the active design system; components read the state's tokens and never compute the effect themselves.

### Behaviour

Requirements in EARS form, each with its stable id.

- **OTF-1** THE one-time-code field SHALL be a Field whose one control is a One-time-code input, and SHALL draw nothing of its own: every row, text, mark, cell and line it shows is drawn by one of the two, from that component's own tokens, as FLD-1 to FLD-8 and OTC-1 to OTC-3, OTC-7 and OTC-15 to OTC-17 say. THE one-time-code field SHALL have no token, no size and no gap of its own: the Field places the control and gives it its width (FLD-1), and the One-time-code input lays its row out in that width (OTC-1, OTC-23). What it shows SHALL be the picture a product gets by placing that One-time-code input in that Field by hand with the same values, and what assistive technology is told SHALL be the same name, description and states (FLD-10, FLD-11, OTC-22).
- **OTF-2** THE one-time-code field SHALL give each of its props, unchanged, to the member it is from and SHALL hold no state between the two: label, labelHidden, supportingText, errorText, error, disabled, required, optional, requiredMark, requiredText and optionalText are the Field's; value, length, type, groupSize, mask and readOnly are the One-time-code input's. A value a member does not know SHALL be passed on as given and answered by that member (FLD-22, OTC-19). THE one-time-code field SHALL never set the One-time-code input's own label, error or disabled: the Field's label names the control (FLD-10, OTC-22), the Field's error puts it in its error condition (FLD-8, OTC-17) and the Field's disabled disables it (FLD-14, OTC-20), so that each is said once, in the place where the label follows.
- **OTF-3** THE one-time-code field SHALL hold one value, the One-time-code input's. WHEN the person changes it THE one-time-code field's value SHALL be the new one before any event is reported, and THE one-time-code field SHALL report input, change, complete and action as the One-time-code input emits them — the same events, carrying the same value, in the same order and as often (OTC-13, OTC-14) — as its own, adding none and holding none back. WHEN the product sets value THE one-time-code field SHALL show it as OTC-18 says and SHALL report no event.
- **OTF-4** WHERE the platform has forms (the web) THE one-time-code field SHALL be the one control the form meets, and what OTC-29 says of a One-time-code input SHALL hold of the one-time-code field as a whole: it takes name; it submits the code alone, an empty string WHILE it holds none, and nothing WHILE disabled (OTC-20); it is restored on navigation and resets to the value it was first given; and it reports a missing value WHILE required is true and the value is empty, and nothing for a code shorter than length. Its members SHALL add no entry of their own to the form, and the action key SHALL submit the form the one-time-code field belongs to as OTC-13 says, unless action was cancelled.
- **OTF-5** THE one-time-code field SHALL be one stop in the focus order, its control's (FLD-12, OTC-2). WHEN the product moves focus to the one-time-code field THE one-time-code field SHALL pass it to the control, whose active cell is then the one OTC-5 names. A press on the label row SHALL move focus to the control and a press on the supporting row SHALL do nothing (FLD-12); THE one-time-code field SHALL take focus for no other press, SHALL add no key, and SHALL draw no focus indicator of its own: the frame's focused tokens and the active cell's focused line are the members' (FLD-13, OTC-7).
- **OTF-6** THE one-time-code field SHALL hold exactly one control and SHALL take no other from the product: it has no place for a child but the Field's label glyph (FLD-3, FLD-20), so that the cases of FLD-15 — no control, several controls — and of FLD-23 — a control replaced by another — never arise in it. IF the one-time-code field is placed in a Field THEN THE one-time-code field SHALL be drawn as it is and reported in debug builds as a field placed in a Field (FLD-15); WHERE it is placed in a field group THE one-time-code field SHALL follow the group's disabled as a Field does (FGR-14) and SHALL take nothing else from the group.
- **OTF-7** THE one-time-code field SHALL have no words of its own: every word it shows or says is a prop of the Field's, read as FLD-24 says — the instance's, else the product's words of the same name — and the One-time-code input has none (OTC-30). THE one-time-code field SHALL read no key of the product's words itself.
- **OTF-8** THE one-time-code field SHALL add nothing to how its members answer the place they are used in: the layout direction (FLD-18 to FLD-21; OTC-27 and OTC-28, by which the cells stay a left-to-right run and stand at the start edge, under the label), enlarged text (FLD-16, OTC-23, OTC-24), a person's own forced colors (FLD-17, OTC-26) and the caret's reduced motion are each member's own answer. THE one-time-code field SHALL have no direction, size, color or motion setting of its own, and SHALL never be wider than its layout gives it.
- **OTF-9** WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE one-time-code field SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on the element that carries its role — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the one-time-code field is invalid — except those the one-time-code field owns (aria-label, aria-labelledby, aria-disabled), which it SHALL move and not expose: its name is label (OTF-1). WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE one-time-code field SHALL take it off that element. WHEN the product sets an aria- attribute the one-time-code field owns THE one-time-code field SHALL report it in debug builds.

### Tokens

As written in the token documents (DTCG): an alias in braces names the token it takes its value from, which each design system resolves. On the web each token is a CSS custom property: `--tanrei` and the name after `tanrei`, joined by hyphens (`tanrei.comp.field.…` → `--tanrei-comp-field-…`).

#### `tanrei.comp.field`

| Token | Type | Value |
| --- | --- | --- |
| `comp.field.label.typescale` | `typography` | `{tanrei.sys.typescale.label}` |
| `comp.field.label.gap` | `dimension` | `{tanrei.sys.space.space100}` |
| `comp.field.label-icon.size` | `dimension` | `{tanrei.sys.icon.small}` |
| `comp.field.label-icon.gap` | `dimension` | `{tanrei.sys.space.space100}` |
| `comp.field.requirement.mark` | `number` | `{tanrei.sys.behavior.requirement-mark}` |
| `comp.field.requirement.gap` | `dimension` | `{tanrei.sys.space.space100}` |
| `comp.field.requirement.asterisk-gap` | `dimension` | `{tanrei.sys.space.space25}` |
| `comp.field.supporting-text.typescale` | `typography` | `{tanrei.sys.typescale.label-small}` |
| `comp.field.supporting-text.gap` | `dimension` | `{tanrei.sys.space.space50}` |
| `comp.field.counter.gap` | `dimension` | `{tanrei.sys.space.space200}` |
| `comp.field.motion.state-duration` | `duration` | `{tanrei.sys.motion.role.state.default}` |
| `comp.field.motion.state-easing` | `cubicBezier` | `{tanrei.sys.motion.easing.state}` |
| `comp.field.standard.label.color` | `color` | `{tanrei.sys.color.on-surface}` |
| `comp.field.standard.label-icon.color` | `color` | `{tanrei.sys.color.on-surface-variant}` |
| `comp.field.standard.supporting-text.color` | `color` | `{tanrei.sys.color.on-surface-variant}` |
| `comp.field.standard.counter.color` | `color` | `{tanrei.sys.color.on-surface-variant}` |
| `comp.field.standard.required-asterisk.color` | `color` | `{tanrei.sys.color.primary}` |
| `comp.field.standard.error.label.color` | `color` | `{tanrei.sys.color.on-surface}` |
| `comp.field.standard.error.label-icon.color` | `color` | `{tanrei.sys.color.on-surface-variant}` |
| `comp.field.standard.error.supporting-text.color` | `color` | `{tanrei.sys.color.on-surface-variant}` |
| `comp.field.standard.error.counter.color` | `color` | `{tanrei.sys.color.on-surface-variant}` |
| `comp.field.standard.error.required-asterisk.color` | `color` | `{tanrei.sys.color.primary}` |
| `comp.field.standard.error.value-text.color` | `color` | `{tanrei.sys.color.on-surface-variant}` |
| `comp.field.standard.value-text.color` | `color` | `{tanrei.sys.color.on-surface-variant}` |
| `comp.field.standard.error-text.color` | `color` | `{tanrei.sys.color.error}` |
| `comp.field.value-text.typescale` | `typography` | `{tanrei.sys.typescale.label}` |
| `comp.field.value-text.gap` | `dimension` | `{tanrei.sys.space.space200}` |
| `comp.field.error-text.gap` | `dimension` | `{tanrei.sys.space.space50}` |
| `comp.field.error-text.placement` | `number` | `0` |

Per-state tokens, valued by the design system's pattern rules (not written by hand):

- `comp.field.<variant>.<state>.<property>` for the variants `standard`, the states `focused`, `disabled` and the properties `label.color`, `label-icon.color`, `supporting-text.color`, `required-asterisk.color`, `error.label.color`, `error.label-icon.color`, `error.supporting-text.color`, `error.required-asterisk.color`, `counter.color`, `error.counter.color`, `value-text.color`, `error.value-text.color`, `error-text.color`.

### What the web draws differently

- The element’s shadow root holds a `<tanrei-field>` with a `<tanrei-one-time-code-input>` in it, and nothing else. Importing the element defines both.
- The element is form-associated. It takes `name` and `form`, submits the code alone — nothing while disabled —, resets to the `value` attribute, follows a disabled `<fieldset>`, and reports a missing value while `required` is set and it is empty. Its two members add no entry to the form. Enter in the cells presses the default button of the element’s form; cancel `action` to prevent it.
- `input`, `change`, `complete` and `action` are the one-time-code input’s CustomEvents with `detail.value`. Their target is the element, and `event.target.value` is the code in every listener.
- Parts: `field` and `one-time-code-input` are the two members. Their own parts have the same names here as one level down: `label`, `label-icon`, `requirement-label`, `supporting-text`; `input`, `cell`, `character`, `caret`, `separator`.
- The element is not focusable itself: `focus()` goes to the cells, and a page’s own `<label for>` moves focus there. `autofocus` on the element focuses the cells when it is first drawn, unless something else has focus.
- The element has no role. Name it with `label` — with `label-hidden` where the label is drawn elsewhere — and never with `aria-label`, which names nothing here.
- The attributes are the members’ own: `label-hidden`, `supporting-text`, `error-text`, `required-mark`, `required-text`, `optional-text`, `group-size`, `readonly`.
- It has one slot, `label-icon`. A second control placed inside it is not drawn.
- Before the element is defined it has no size and shows only a `label-icon` child. Hide that with `tanrei-one-time-code-field:not(:defined) > *` and reserve the height. A page that must work without script uses a `<label>` around a plain `<input autocomplete="one-time-code" inputmode="numeric">`, with its help beside it.

## Guidelines

### Do

- Say in `supportingText` how many characters to expect and where the code was sent.
- Draw the groups as the message writes them: `groupSize="3"` for a code sent as “123 456”.
- Say that a code is wrong in words, with `error` and `errorText`. Decide yourself whether a wrong code is cleared: often one digit is wrong.
- Use `readOnly`, not `disabled`, while a complete code is being checked. A disabled field loses focus, and a person who must then correct the code loses their place.
- Put the way to ask for a new code, and any time limit, beside the field. Where they belong inside the frame, write the field by hand, one level down.

### Don’t

- Don’t put a one-time-code field inside a field. It is a field already; a debug build says so.
- Don’t name it with `aria-label`. Where no label should be drawn, give `label` and `labelHidden`.
- Don’t block paste, masked or not, and don’t move focus away or submit the form without telling the person first.
- Don’t use `mask` by habit. A code that is used once and expires rarely needs hiding, and hiding it makes a mistake harder to see.
- Don’t restyle the cells for this field alone by copying them. Set the member’s token on the field.

## Accessibility

### What the component handles

- It is one text box, the one-time-code input’s. Its name is `label`, drawn or not; its description is the shown supporting or error text, with the optional text while the field is optional.
- It is exposed as invalid while `error` is true, as required while `required` is set, as disabled while `disabled` is true, as read-only while `readOnly` is true, and as a password field while `mask` is true.
- The name, the description and the states are tied exactly as a field ties them to any control it frames. The field written by hand, one level down, is the same text box.
- The drawn label, the requirement mark, the cells, the caret and the group marks are not exposed a second time.
- It is one stop for the Tab key. A press on the label moves focus to the cells and operates nothing; a press on the help does nothing.
- An error that appears while focus is in the one-time-code field is announced once, politely, by its field member.
- Direction, enlarged text and forced colors are each member’s own answer: in a right-to-left layout the frame is mirrored and the cells stay a left-to-right run at the start edge; at 200% text nothing is cut and nothing scrolls sideways.
- It has no words of its own. `requiredText` and `optionalText` left empty are read from the product’s words by the field.

Known gaps on the web are its members’: what screen readers say while a code is typed has been read from the browsers’ accessibility trees, not heard with a screen reader, and before the element is defined nothing is drawn.

### What you need to do

- Give `label`, always, in the words a person would use for the code.
- Say what is expected in words: how many characters, and where the code was sent. The cells show the length only to people who see them.
- Say that a code is wrong, expired or required with `errorText`, `supportingText` and `required`. Color is never the only sign.
- Where the time to enter a code is limited, say so, and let the person ask for more time or a new code.