UI Skillbook
2

OTP Field

One-time-code entry with a slot per character, separate or joined. It handles paste and auto-advance.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-otp-field and follow the Siteplane OTP Field skill it prints for this task.

Paste this into your agent.

OTP Field takes verification, two-factor and recovery codes of a known length. It manages typing, pasting and deletion across slots, and can submit the form once the code is complete.

Install

bashnpx shadcn@4.18.0 add @siteplane/otp-field

Import it from @/siteplane/components/otp-field. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Input: Pick Input when the code length varies or the value is a password.
  • vs Number Field: Pick Number Field when the digits form a quantity instead of a code.

Rules

  • Set length and render exactly that many OTPFieldInput slots; OTPFieldSeparator does not count.
  • Label the field once. The first slot takes the Field label, so name only the slots after it.
  • Use validationType="alphanumeric" for recovery codes and layout="joined" for a single-input look.
  • Treat onValueComplete or autoSubmit as a trigger only, and verify the code with rate limits on the server.
  • Keep the label on top. OTP Field takes no floating label.

Reference

  • OTP Field docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Forms & selection. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-otp-field

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Siteplane Checkboxby UI Skillbook

A box for one independent yes/no choice, with indeterminate state and form submission built in.

Siteplane UI

Siteplane Checkbox Groupby UI Skillbook

Holds a set of related checkboxes as one array value, with an optional parent box that selects all.

Siteplane UI

Siteplane Date Fieldby UI Skillbook

A typed date input built from day, month and year segments, with an optional calendar popover.

Siteplane UI

Siteplane Fieldby UI Skillbook

Ties a control to its label, help text and validation messages, with top or floating labels.

Siteplane UI

Back to Siteplane UI