Accessible one-time password component with copy paste functionality.
-
-
tsx
1
2// src/components/ui/input-otp.tsx — render N slots as styled boxes over a single hidden input;// the island mirrors keystrokes into the slots and moves focus. Supports copy-paste of the whole code.
Installation
Terminal
$ bext ui add input-otp
Copy and paste the following into src/components/ui/input-otp.tsx.
input-otp.tsx
1
2// src/components/ui/input-otp.tsx — render N slots as styled boxes over a single hidden input;// the island mirrors keystrokes into the slots and moves focus. Supports copy-paste of the whole code.
Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.
src/app/page.tsx2 files · signals · runs in your browser
import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";
// A normal PRISM server page. The island below is rendered to HTML on the
// server, then hydrated on the client - only the signal-bound nodes update.
export default function Page() {
return (
<main style="max-width:680px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif;color:#0a0a0a">
<h1 style="letter-spacing:-0.02em;margin-bottom:4px">Input OTP</h1>
<p style="color:#64748b;margin-top:0">Six single-character inputs feed one array signal; the joined code shows live.</p>
{signalsIsland("Showcase", Showcase, {})}
</main>
);
}
Pure PRISM + real bext signals — fine-grained, no re-render.
src/app/page.tsx2 files · react · runs in your browser
import Showcase from "../components/Showcase";
// A one-time-passcode field: N single-char inputs that advance focus
// to the next box as you type. State + refs live in the island.
export default function Page() {
return (
<main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
<h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Input OTP</h1>
<p style={{ color: "#64748b", marginTop: 0 }}>A segmented field for one-time passcodes.</p>
<Showcase />
</main>
);
}