With Suffix Input

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!-- With Suffix - Weight -->
<div class="relative">
  <label class="block text-sm font-medium text-gray-700 mb-1">Package Weight</label>
  <input type="number" placeholder="0.00" class="w-full pl-4 pr-14 py-2.5 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
  <span class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none text-gray-500">kg</span>
</div>

<!-- With Suffix - Button -->
<div class="relative mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
  <input type="text" placeholder="Choose a username" class="w-full pl-4 pr-24 py-2.5 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
  <button type="button" class="absolute inset-y-0 right-0 px-4 bg-blue-600 text-white text-sm font-medium rounded-r-lg hover:bg-blue-700 transition-colors">Check</button>
</div>

<!-- With Suffix - Dimension -->
<div class="relative mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">Dimensions</label>
  <div class="flex items-center gap-2">
    <input type="number" placeholder="Length" class="w-full pl-4 pr-4 py-2.5 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
    <span class="text-gray-400">×</span>
    <input type="number" placeholder="Width" class="w-full pl-4 pr-4 py-2.5 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
    <span class="text-gray-400">×</span>
    <input type="number" placeholder="Height" class="w-full pl-4 pr-4 py-2.5 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
    <span class="text-gray-500 text-sm">cm</span>
  </div>
</div>

<!-- With Suffix - Upload -->
<div class="relative mt-4">
  <label class="block text-sm font-medium text-gray-700 mb-1">File Size Limit</label>
  <input type="number" placeholder="Maximum file size" class="w-full pl-4 pr-20 py-2.5 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors" />
  <span class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
    <select class="bg-transparent text-gray-500 text-sm focus:outline-none cursor-pointer">
      <option>MB</option>
      <option>GB</option>
    </select>
  </span>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

# With Suffix

Input with suffix addon.

## Usage
```bash
npx devsnips add Tailwind/Components/Input/with-suffix
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`