Inputs
Text fields, OTP verification grids, and advanced input layouts.
Inputs
Inputs allow users to enter text, check options, select dates, or input verification security pin codes.
Interactive Showcase
Browse all the interactive input designs and variants included in Synapse UI.
codesnippetui
Drag and drop or click to upload
0100
8+ characters
Number
Lowercase
Uppercase
Special (!@#$)
Security Verification
Enter the 6-digit code sent to your email.
Didn't receive code?
Opacity100%
Swatches
1
Installation
Install any of the input components directly into your project via the CLI:
CODE
# Install Input OTP (One-Time Password Verification Grid)
npx shadcn@latest add http://localhost:3000/r/input-otp.json
# Install Input 02 (Floating Label Input)
npx shadcn@latest add http://localhost:3000/r/input-02.json
# Install Input 06 (Underline Focus Field)
npx shadcn@latest add http://localhost:3000/r/input-06.json