OTP renders a one-time-passcode field: a single native input laid over fixed cells, so it stays keyboard- and paste-friendly while looking like separate boxes. Set the number of cells with length; size, variant, and joined follow the standard input styling.
Basic OTP
<c-lb.otp length="4" />
Sizes
<div class="flex flex-col items-start gap-4">
<c-lb.otp size="xs" length="4" />
<c-lb.otp size="sm" length="4" />
<c-lb.otp size="md" length="4" />
<c-lb.otp size="lg" length="4" />
<c-lb.otp size="xl" length="4" />
</div>
Color Variants
<div class="flex flex-col items-start gap-4">
<c-lb.otp variant="primary" length="6" />
<c-lb.otp variant="success" length="6" />
<c-lb.otp variant="error" length="6" />
</div>
Joined
<c-lb.otp length="6" joined variant="primary" />
API Reference
c-lb.otp
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| length | string |
4
|
No | Number of code cells (also sets the input maxlength) |
| name | string |
otp
|
No | Name attribute for the input |
| size |
xs
sm
md
lg
xl
|
md
|
No | Cell size |
| variant |
neutral
primary
secondary
accent
info
success
warning
error
|
- | No | Color variant |
| joined | boolean |
False
|
No | Render the cells as a connected group |