InputOTP

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { InputOTP, Label, Link, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { Slots, styles } from "./parts";6export function Basic() {7  return (8    <TextField name="code" xstyle={styles.field}>9      <div {...stylex.props(styles.heading)}>10        <Label>Verify account</Label>11        <p {...stylex.props(styles.muted)}>We&apos;ve sent a code to a****@gmail.com</p>12      </div>13      <InputOTP length={6} name="code">14        <Slots />15      </InputOTP>16      <div {...stylex.props(styles.resend)}>17        <p {...stylex.props(styles.muted)}>Didn&apos;t receive a code?</p>18        <Link xstyle={styles.link} href="#">19          Resend20        </Link>21      </div>22    </TextField>23  );24}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { InputOTP, Label, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { Slots, styles } from "./parts";6export function Variants() {7  return (8    <div {...stylex.props(styles.variants)}>9      {(["primary", "secondary"] as const).map((variant) => (10        <TextField key={variant} name={`${variant}-code`} xstyle={styles.field}>11          <Label>{variant === "primary" ? "Primary variant" : "Secondary variant"}</Label>12          <InputOTP length={6} name={`${variant}-code`} variant={variant}>13            <Slots />14          </InputOTP>15        </TextField>16      ))}17    </div>18  );19}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { InputOTP, Label, Link, Surface, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { Slots, styles } from "./parts";6export function OnSurface() {7  return (8    <Surface xstyle={styles.surface}>9      <TextField name="code">10        <div {...stylex.props(styles.heading)}>11          <Label>Verify account</Label>12          <p {...stylex.props(styles.muted)}>We&apos;ve sent a code to a****@gmail.com</p>13        </div>14        <InputOTP length={6} name="code" variant="secondary">15          <Slots />16        </InputOTP>17        <div {...stylex.props(styles.resend)}>18          <p {...stylex.props(styles.muted)}>Didn&apos;t receive a code?</p>19          <Link xstyle={styles.link} href="#">20            Resend21          </Link>22        </div>23      </TextField>24    </Surface>25  );26}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Description, InputOTP, Label, TextField } from "@lenso/ui";4import { Slots, styles } from "./parts";5export function Disabled() {6  return (7    <TextField disabled name="code" xstyle={styles.field}>8      <Label>Verify account</Label>9      <Description>Code verification is currently disabled</Description>10      <InputOTP disabled length={6} name="code">11        <Slots />12      </InputOTP>13    </TextField>14  );15}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { InputOTP, Label, TextField } from "@lenso/ui";4import { styles } from "./parts";5export function FourDigits() {6  return (7    <TextField name="pin" xstyle={styles.field}>8      <Label>Enter PIN</Label>9      <InputOTP length={4} name="pin">10        <InputOTP.Group>11          <InputOTP.Slot aria-label="Digit 1" />12          <InputOTP.Slot aria-label="Digit 2" />13          <InputOTP.Slot aria-label="Digit 3" />14          <InputOTP.Slot aria-label="Digit 4" />15        </InputOTP.Group>16      </InputOTP>17    </TextField>18  );19}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Description, InputOTP, Label, TextField } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { Slots, styles } from "./parts";7export function Controlled() {8  const [value, setValue] = useState("");9  return (10    <TextField name="code" xstyle={styles.field}>11      <Label>Verify account</Label>12      <InputOTP length={6} name="code" value={value} onValueChange={setValue}>13        <Slots />14      </InputOTP>15      <Description>16        {value.length > 0 ? (17          <>18            Value: {value} ({value.length}/6) •{" "}19            <button type="button" {...stylex.props(styles.clear)} onClick={() => setValue("")}>20              Clear21            </button>22          </>23        ) : (24          "Enter a 6-digit code"25        )}26      </Description>27    </TextField>28  );29}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Button, Form, InputOTP, Label, Spinner, TextField } from "@lenso/ui";4import { useState, type FormEvent } from "react";5import { Slots, styles } from "./parts";6export function OnComplete() {7  const [value, setValue] = useState("");8  const [isComplete, setIsComplete] = useState(false);9  const [isSubmitting, setIsSubmitting] = useState(false);10  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {11    event.preventDefault();12    if (!isComplete || isSubmitting) return;13    setIsSubmitting(true);14    setTimeout(() => {15      setIsSubmitting(false);16      setValue("");17      setIsComplete(false);18    }, 2000);19  };20  return (21    <Form xstyle={styles.field} onSubmit={handleSubmit}>22      <TextField name="code">23        <Label>Verify account</Label>24        <InputOTP25          length={6}26          name="code"27          value={value}28          onValueComplete={(code) => {29            setIsComplete(true);30            console.log("Code complete:", code);31          }}32          onValueChange={(next) => {33            setValue(next);34            setIsComplete(false);35          }}36        >37          <Slots />38        </InputOTP>39      </TextField>40      <Button41        xstyle={styles.submit}42        disabled={!isComplete}43        isLoading={isSubmitting}44        type="submit"45        variant="primary"46      >47        {isSubmitting ? (48          <>49            <Spinner color="current" size="sm" />50            Verifying...51          </>52        ) : (53          "Verify Code"54        )}55      </Button>56    </Form>57  );58}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import {4  Button,5  Description,6  FieldError,7  Form,8  InputOTP,9  Label,10  Link,11  Spinner,12  TextField,13} from "@lenso/ui";14import { useState, type FormEvent } from "react";15import * as stylex from "@stylexjs/stylex";16import { Slots, styles } from "./parts";17export function FormExample() {18  const [value, setValue] = useState("");19  const [error, setError] = useState("");20  const [isSubmitting, setIsSubmitting] = useState(false);21  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {22    event.preventDefault();23    if (isSubmitting) return;24    setError("");25    if (value.length !== 6) {26      setError("Please enter all 6 digits");27      return;28    }29    setIsSubmitting(true);30    setTimeout(() => {31      if (value === "123456") {32        console.log("Code verified successfully!");33        setValue("");34      } else setError("Invalid code. Please try again.");35      setIsSubmitting(false);36    }, 1500);37  };38  return (39    <Form xstyle={styles.form} onSubmit={handleSubmit}>40      <TextField name="code" invalid={!!error}>41        <Label>Two-factor authentication</Label>42        <Description>Enter the 6-digit code from your authenticator app</Description>43        <InputOTP44          length={6}45          name="code"46          value={value}47          onValueChange={(next) => {48            setValue(next);49            setError("");50          }}51        >52          <Slots />53        </InputOTP>54        {error && <FieldError match>{error}</FieldError>}55      </TextField>56      <Button57        xstyle={styles.full}58        disabled={value.length !== 6}59        isLoading={isSubmitting}60        type="submit"61        variant="primary"62      >63        {isSubmitting ? (64          <>65            <Spinner color="current" size="sm" />66            Verifying...67          </>68        ) : (69          "Verify"70        )}71      </Button>72      <div {...stylex.props(styles.help)}>73        <p {...stylex.props(styles.muted)}>Having trouble?</p>74        <Link xstyle={styles.link} href="#">75          Use backup code76        </Link>77      </div>78    </Form>79  );80}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Description, InputOTP, Label, TextField } from "@lenso/ui";4import { Slots, styles } from "./parts";5export function WithPattern() {6  return (7    <TextField name="code" xstyle={styles.field}>8      <Label>Enter code (letters only)</Label>9      <Description>Only alphabetic characters are allowed</Description>10      <InputOTP length={6} name="code" validationType="alpha">11        <Slots />12      </InputOTP>13    </TextField>14  );15}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Button, Description, FieldError, Form, InputOTP, Label, TextField } from "@lenso/ui";4import { useState, type FormEvent } from "react";5import { Slots, styles } from "./parts";6export function WithValidation() {7  const [value, setValue] = useState("");8  const [isInvalid, setIsInvalid] = useState(false);9  const onSubmit = (event: FormEvent<HTMLFormElement>) => {10    event.preventDefault();11    const code = new FormData(event.currentTarget).get("code");12    if (code !== "123456") {13      setIsInvalid(true);14      return;15    }16    setIsInvalid(false);17    setValue("");18    alert("Code verified successfully!");19  };20  return (21    <Form xstyle={styles.field} onSubmit={onSubmit}>22      <TextField name="code" invalid={isInvalid}>23        <Label>Verify account</Label>24        <Description>Hint: The code is 123456</Description>25        <InputOTP26          length={6}27          name="code"28          value={value}29          onValueChange={(next) => {30            setValue(next);31            setIsInvalid(false);32          }}33        >34          <Slots />35        </InputOTP>36        {isInvalid && <FieldError match>Invalid code. Please try again.</FieldError>}37      </TextField>38      <Button disabled={value.length !== 6} type="submit">39        Submit40      </Button>41    </Form>42  );43}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { InputOTP, Label, Link, TextField } from "@lenso/ui";4import { Slots, styles } from "./parts";5export function CustomStyles() {6  return (7    <TextField name="code" xstyle={[styles.field, styles.customWidth]}>8      <Label>Verify account</Label>9      <InputOTP length={6} name="code">10        <Slots custom />11      </InputOTP>12      <Link xstyle={styles.resendLink} href="#">13        Resend code14      </Link>15    </TextField>16  );17}