OTP input

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12

import { OtpInput } from "@gunkin/uiify";

export default function Example() {
  return (
    <OtpInput.Root className="" id="verification-code" length={6}>
      {Array.from({ length: 6 }, (_, index) => (
        <OtpInput.Slot className="" index={index} key={index} />
      ))}
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66

/* OTP input — segmented code entry slots. */

@layer components {
  [data-uiify-otp-input] {
    position: relative;
    display: inline-flex;
    gap: var(--space-sm);
    cursor: text;
  }

  [data-uiify-otp-input] [data-part="slot"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--uiify-control-size, var(--control-md));
    block-size: var(--uiify-control-size, var(--control-md));
    border: var(--border-width) solid var(--input);
    border-radius: var(--radius-full);
    background-color: var(--card);
    color: var(--foreground);
    font-size: var(--uiify-control-font, var(--text-base));
    font-weight: var(--weight-medium);
    transition: var(--transition-colors);
  }

  [data-uiify-otp-input] [data-part="slot"][data-active] {
    border-color: var(--primary);
    outline: 2px solid color-mix(in oklch, var(--ring) 35%, transparent);
    outline-offset: 0;
  }

  [data-uiify-otp-input] [data-part="slot"][data-active]::after {
    inline-size: 1px;
    block-size: 1em;
    background-color: currentcolor;
    content: "";
    animation: uiify-otp-input-caret-blink 1s step-end infinite;
  }

  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-uiify-otp-input] [data-part="slot"][data-active]::after {
      animation: none;
    }
  }

  [data-uiify-otp-input] [data-part="slot"][data-filled] {
    border-color: var(--input);
  }

  [data-uiify-otp-input][data-disabled] [data-part="slot"] {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

@layer components {
  [data-uiify-otp-input]:not([data-disabled]) {
    cursor: text;
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26

import { OtpInput } from "@gunkin/uiify";

export default function Example() {
  return (
    <OtpInput.Root className="relative inline-flex gap-sm [cursor:text]" id="verification-code" length={6}>
      {Array.from({ length: 6 }, (_, index) => (
        <OtpInput.Slot
          className="
            grid place-items-center [inline-size:var(--control-md)] [block-size:var(--control-md)]
            border-[length:var(--border-width)] border-solid border-input rounded-full bg-card text-foreground text-base
            font-medium tabular-nums [transition:var(--transition-colors)] data-[active]:border-primary
            data-[active]:[outline:2px_solid_color-mix(in_oklch,_var(--ring)_35%,_transparent)]
            data-[active]:[outline-offset:0] data-[active]:after:content-[''] data-[active]:after:[inline-size:1px]
            data-[active]:after:[block-size:1em] data-[active]:after:bg-current
            data-[active]:after:[animation:uiify-otp-input-caret-blink_1s_step-end_infinite]
            motion-reduce:data-[active]:after:[animation:none] data-[filled]:border-input data-[disabled]:opacity-50
            data-[disabled]:cursor-not-allowed
          "
          index={index}
          key={index}
        />
      ))}
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  );
}