devsnips
Search docs, APIs, guides…

Component

Split Input

Multi-part input fields for structured data like cards, OTPs, and dates

  • Component
  • Tailwind
  • MIT

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/input/split-input/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Input/split-input
registry path: Tailwind/Components/Input/split-input

Source

Implementation

code.html 
<!-- Split Input - Card Number -->
<div>
  <label class="block text-sm font-medium text-gray-700 mb-2">Card Number</label>
  <div class="flex">
    <input type="text" maxlength="4" placeholder="1234" class="flex-1 min-w-0 px-3 py-3 bg-white border border-gray-300 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
    <input type="text" maxlength="4" placeholder="5678" class="flex-1 min-w-0 px-3 py-3 bg-white border-y border-gray-300 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
    <input type="text" maxlength="4" placeholder="9012" class="flex-1 min-w-0 px-3 py-3 bg-white border-y border-gray-300 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
    <input type="text" maxlength="4" placeholder="3456" class="flex-1 min-w-0 px-3 py-3 bg-white border border-gray-300 text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
  </div>
</div>

<!-- Split Input - OTP -->
<div class="mt-6">
  <label class="block text-sm font-medium text-gray-700 mb-2">Verification Code</label>
  <div class="flex gap-3">
    <input type="text" maxlength="1" class="w-12 h-14 bg-white border-2 border-gray-200 rounded-lg text-center text-xl font-bold focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-colors" />
    <input type="text" maxlength="1" class="w-12 h-14 bg-white border-2 border-gray-200 rounded-lg text-center text-xl font-bold focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-colors" />
    <input type="text" maxlength="1" class="w-12 h-14 bg-white border-2 border-gray-200 rounded-lg text-center text-xl font-bold focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-colors" />
    <input type="text" maxlength="1" class="w-12 h-14 bg-white border-2 border-gray-200 rounded-lg text-center text-xl font-bold focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition-colors" />
  </div>
  <p class="mt-2 text-sm text-gray-500">We sent a code to your email</p>
</div>

<!-- Split Input - Phone -->
<div class="mt-6">
  <label class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>
  <div class="flex">
    <select class="px-3 py-3 bg-gray-50 border border-gray-300 rounded-l-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
      <option>+1</option>
      <option>+44</option>
      <option>+91</option>
    </select>
    <input type="tel" placeholder="(555) 123-4567" class="flex-1 min-w-0 px-4 py-3 bg-white border border-gray-300 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
  </div>
</div>

<!-- Split Input - Date -->
<div class="mt-6">
  <label class="block text-sm font-medium text-gray-700 mb-2">Date of Birth</label>
  <div class="flex gap-3">
    <div class="flex-1">
      <select class="w-full px-3 py-3 bg-white border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        <option>Month</option>
        <option>January</option>
        <option>February</option>
      </select>
    </div>
    <div class="w-20">
      <input type="text" placeholder="Day" class="w-full px-3 py-3 bg-white border border-gray-300 rounded-lg text-sm text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
    </div>
    <div class="w-24">
      <input type="text" placeholder="Year" class="w-full px-3 py-3 bg-white border border-gray-300 rounded-lg text-sm text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
    </div>
  </div>
</div>
55 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/input/split-input
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/input/split-input/

Install: npx devsnips add
Tailwind/Components/Input/split-input

This is the Split Input — Multi-part input fields for structured data like cards, OTPs, and dates

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/input/split-input