Blok - Sitecore's Design System

Primitives
Bloks
Theming
Graphics
Resources

Accordion
Action bar
Alert
Alert dialog
Aspect ratio
Avatar
Badge
Breadcrumb
Button
Calendar
Card
Carousel
Chart
Checkbox
Circular Progress
Collapsible
Combobox
Command
Context menu
Date picker
Dialog
Draggable
Dropdown
Editable
Empty states
Error states
Field
Filter
Icon
Input
Input Group
Input OTP
Kbd
Label
Navigation (Side)
Navigation (Stack)
Navigation menu
Pagination
Popover
Progress
Radio group
Resizable
Scroll area
Search input
Select
Select (React Select)
Separator
Sheet
Skeleton
Slider
Sonner
Spinner
Stepper
Switch
Table
Tabs
Textarea
Time picker
Timeline
Toggle
Toggle group
Tooltip

Input OTP

A one-time password input component for verification codes.

Simple

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Installation

pnpm dlx shadcn@latest add https://blok-staging.vercel.app/r/inputOtp.json

Usage

Examples

The following are examples of our inputOtp components.

Pattern

Digits Only

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

With Spacing

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Shadcn docs