CodeInput

Check the code in onComplete, not onChange.

Children: Nothing

Example

view.dml

<View gap="small">
  <CodeInput label="Enter the code we sent you" length="6" value="{{ code }}" onChange="setCode" onComplete="verify" />
  <If condition="{{ checking }}">
    <Text tone="muted">Checking your code…</Text>
  </If>
</View>

controller.ts

export default definePage({
  initialState: { code: '', checking: false },
  mutations: {
    setCode: (_state, event: ValueEvent) => ({ code: event.detail.value }),
    // Runs once all 6 digits are in.
    verify: (_state, event: ValueEvent) => ({ code: event.detail.value, checking: true }),
  },
});

Props

Prop	Type	What it is
`value`	`string`
`length`	`number`	Number of digits. Default: `6`.
`label`	`string`
`hint`	`string`	Help shown under the field, which `error` replaces.
`error`	`string`	Shown under the field in red, in place of `hint`.
`secure`	`boolean`	Shows dots in place of the digits, as for a PIN.
`disabled`	`boolean`	Dims it, and the person can't use it.

Events

Event	Sends	Notes
`onChange`	`{ value }` in `detail`
`onComplete`	`{ value }` in `detail`	When every box is filled.

CodeInput

Example

Props

Events

Keep reading

On this page