shadcn-ui/apps/v4/examples/base/input-otp-invalid.tsx

"use client"

import * as React from "react"
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/examples/base/ui/field"
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/examples/base/ui/input-otp"

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

  return (
    <Field>
      <FieldLabel htmlFor="invalid">Invalid State</FieldLabel>
      <FieldDescription>
        Example showing the invalid error state.
      </FieldDescription>
      <InputOTP id="invalid" maxLength={6} value={value} onChange={setValue}>
        <InputOTPGroup>
          <InputOTPSlot index={0} aria-invalid />
          <InputOTPSlot index={1} aria-invalid />
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          <InputOTPSlot index={2} aria-invalid />
          <InputOTPSlot index={3} aria-invalid />
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          <InputOTPSlot index={4} aria-invalid />
          <InputOTPSlot index={5} aria-invalid />
        </InputOTPGroup>
      </InputOTP>
      <FieldError errors={[{ message: "Invalid code. Please try again." }]} />
    </Field>
  )
}