Input OTP

 1import { InputOtp } from "@/components/wensity/input-otp";
 2
 3export function InputOtpPin() {
 4  return (
 5    <InputOtp
 6      label="Device PIN"
 7      mode="numeric"
 8      length={4}
 9      masked
10      hint="Use your PIN."
11    />
12  );
13}

 1import { InputOtp } from "@/components/wensity/input-otp";
 2
 3export function InputOtpBackupCode() {
 4  return (
 5    <InputOtp
 6      label="Backup code"
 7      mode="alphanumeric"
 8      length={8}
 9      groups={[4, 4]}
10      separator="-"
11      hint="Use backup code."
12    />
13  );
14}

 1import { InputOtp } from "@/components/wensity/input-otp";
 2
 3export function InputOtpAlphanumeric() {
 4  return (
 5    <InputOtp
 6      label="Backup code"
 7      mode="alphanumeric"
 8      length={6}
 9      hint="Alphanumeric only."
10    />
11  );
12}

 1import { InputOtp } from "@/components/wensity/input-otp";
 2
 3export function InputOtpReadOnly() {
 4  return (
 5    <InputOtp
 6      label="Verified code"
 7      mode="numeric"
 8      groups={[3, 3]}
 9      separator=" "
10      value="120805"
11      readOnly
12      status="success"
13      success="Code verified."
14    />
15  );
16}

 1import { useState } from "react";
 2import { Button } from "@/components/wensity/button";
 3import { InputOtp } from "@/components/wensity/input-otp";
 4
 5export function InputOtpReset() {
 6  const [attempt, setAttempt] = useState(0);
 7  const [value, setValue] = useState("");
 8
 9  return (
10    <>
11      <InputOtp
12        key={attempt}
13        label="Authentication code"
14        value={value}
15        onValueChange={setValue}
16      />
17      <Button
18        type="button"
19        variant="secondary"
20        onClick={() => {
21          setValue("");
22          setAttempt((current) => current + 1);
23        }}
24      >
25        Reset field
26      </Button>
27    </>
28  );
29}

 1import { useState } from "react";
 2import { Button } from "@/components/wensity/button";
 3import { InputOtp } from "@/components/wensity/input-otp";
 4
 5export function InputOtpResend() {
 6  const [attempt, setAttempt] = useState(0);
 7  const [value, setValue] = useState("");
 8  const [status, setStatus] = useState<"default" | "error" | "success">("default");
 9
10  const reset = () => {
11    setValue("");
12    setStatus("default");
13    setAttempt((current) => current + 1);
14  };
15
16  return (
17    <>
18      <InputOtp
19        key={attempt}
20        label="SMS code"
21        value={value}
22        status={status}
23        onValueChange={setValue}
24        onFilled={(code) => setStatus(code === "120805" ? "success" : "error")}
25        error={status === "error" ? "Invalid code." : undefined}
26      />
27      {status === "error" ? (
28        <>
29          <Button type="button" variant="secondary" onClick={reset}>
30            Try again
31          </Button>
32          <Button type="button" variant="ghost" onClick={reset}>
33            Resend code
34          </Button>
35        </>
36      ) : null}
37    </>
38  );
39}

 1import { InputOtp } from "@/components/wensity/input-otp";
 2
 3export function InputOtpMasked() {
 4  return (
 5    <InputOtp
 6      label="Security PIN"
 7      mode="numeric"
 8      masked
 9      hint="Hidden entry."
10    />
11  );
12}

 1import { InputOtp } from "@/components/wensity/input-otp";
 2
 3export function InputOtpSeparated() {
 4  return (
 5    <InputOtp
 6      label="Authenticator code"
 7      mode="numeric"
 8      groups={[3, 3]}
 9      separator="·"
10      hint="Grouped code."
11    />
12  );
13}

 1import { Button } from "@/components/wensity/button";
 2import {
 3  FormActions,
 4  FormField,
 5  FormFieldControl,
 6} from "@/components/wensity/form-field";
 7import { InputOtp } from "@/components/wensity/input-otp";
 8
 9export function InputOtpForm() {
10  return (
11    <form onSubmit={(event) => event.preventDefault()}>
12      <FormField label="Authentication code" required>
13        <FormFieldControl asChild>
14          <InputOtp
15            mode="numeric"
16            groups={[3, 3]}
17            hint="Use authenticator code."
18          />
19        </FormFieldControl>
20      </FormField>
21      <FormActions className="mt-4">
22        <Button type="submit">Verify</Button>
23      </FormActions>
24    </form>
25  );
26}