Input Otp

Example

Verification code

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Enter the 6-digit code we sent you.

"use client"

import * as React from "react"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@strongtie/design-system/input-otp"
import { Label } from "@strongtie/design-system/label"

export function InputOTPDefault() {
  const [value, setValue] = React.useState("")

  return (
    <div className="flex flex-col gap-3">
      <Label htmlFor="verification-code">Verification code</Label>
      <InputOTP
        id="verification-code"
        maxLength={6}
        value={value}
        onChange={setValue}
      >
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          <InputOTPSlot index={3} />
          <InputOTPSlot index={4} />
          <InputOTPSlot index={5} />
        </InputOTPGroup>
      </InputOTP>
      <p className="text-muted-foreground text-sm">
        {value === ""
          ? "Enter the 6-digit code we sent you."
          : `You entered: ${value}`}
      </p>
    </div>
  )
}

Props

<InputOTP>

Prop	Type	Default
`maxLength` *	`number`	-
`containerClassName`	`string`	-
`nonce`	`string`	-
`noScriptCSSFallback`	`string \| null`	-
`onChange`	`((newValue: string) => unknown)`	-
`onComplete`	`((...args: any[]) => unknown)`	-
`pasteTransformer`	`((pasted: string) => string)`	-
`pushPasswordManagerStrategy`	`none` \| `increase-width`	-
`render`	`InputOTPRenderFn`	-
`textAlign`	`center` \| `left` \| `right`	-
`value`	`string`	-

<InputOTPSlot>

Prop	Type	Default	Description
`index` *	`number`	-

Example

Verification code

Enter the 6-digit code we sent you.

"use client"

import * as React from "react"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@strongtie/design-system/input-otp"
import { Label } from "@strongtie/design-system/label"

export function InputOTPDefault() {
  const [value, setValue] = React.useState("")

  return (
    <div className="flex flex-col gap-3">
      <Label htmlFor="verification-code">Verification code</Label>
      <InputOTP
        id="verification-code"
        maxLength={6}
        value={value}
        onChange={setValue}
      >
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          <InputOTPSlot index={3} />
          <InputOTPSlot index={4} />
          <InputOTPSlot index={5} />
        </InputOTPGroup>
      </InputOTP>
      <p className="text-muted-foreground text-sm">
        {value === ""
          ? "Enter the 6-digit code we sent you."
          : `You entered: ${value}`}
      </p>
    </div>
  )
}

Props

<InputOTP>

Prop	Type	Default
`maxLength` *	`number`	-
`containerClassName`	`string`	-
`nonce`	`string`	-
`noScriptCSSFallback`	`string \| null`	-
`onChange`	`((newValue: string) => unknown)`	-
`onComplete`	`((...args: any[]) => unknown)`	-
`pasteTransformer`	`((pasted: string) => string)`	-
`pushPasswordManagerStrategy`	`none` \| `increase-width`	-
`render`	`InputOTPRenderFn`	-
`textAlign`	`center` \| `left` \| `right`	-
`value`	`string`	-

<InputOTPSlot>

Prop	Type	Default	Description
`index` *	`number`	-

Input Otp

Example

Install

Components

Props

`<InputOTP>`

`<InputOTPSlot>`

Input Otp

Example

Install

Components

Props

`<InputOTP>`

`<InputOTPSlot>`