InputOTP

A segmented one-time-code input.

InputOTPProps packages/core/src/form-controls.ts:175 ↗

Import

import { InputOTP } from "@tarve/core";

Usage

InputOTP.tsx

import { InputOTP } from "@tarve/core";

let code = "";

<InputOTP
  length={6}
  value={code}
  onValueChange={(value) => {
    code = value;
  }}
/>

Props

Prop	Type	Default
`value` required	`string`	—
`disabled`	`boolean`	—
`length`	`number`	`6`
`mask`	`boolean`	`false`
`onValueChange`	`(value: string) => void`	—
`pattern`	`RegExp`	`/^[0-9]$/`
`slotWidth`	`number`	`36`

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle