-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathinputs.html
More file actions
237 lines (229 loc) · 16.5 KB
/
inputs.html
File metadata and controls
237 lines (229 loc) · 16.5 KB
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Fields - Dashboard Component Library</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#faf5ff',
100: '#f3e8ff',
200: '#e9d5ff',
300: '#d8b4fe',
400: '#c084fc',
500: '#a855f7',
600: '#9333ea',
700: '#7e22ce',
800: '#6b21a8',
900: '#581c87',
}
}
}
}
}
</script>
</head>
<body class="bg-gray-50 antialiased">
<!-- Navigation -->
<nav class="bg-white shadow-sm border-b border-gray-200">
<div class="container mx-auto px-4 py-4">
<a href="index.html" class="inline-flex items-center text-purple-600 hover:text-purple-700 font-medium">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
</svg>
Back to Components
</a>
</div>
</nav>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
<section id="inputs" class="mb-16">
<div class="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
<h2 class="text-3xl font-bold text-gray-900 mb-2">Input Fields</h2>
<p class="text-gray-600 mb-6">Various input field types and states</p>
<!-- Basic Inputs -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Basic Inputs</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="text-input" class="block text-sm font-medium text-gray-700 mb-1">Text Input</label>
<input type="text" id="text-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Enter text">
</div>
<div>
<label for="email-input" class="block text-sm font-medium text-gray-700 mb-1">Email Input</label>
<input type="email" id="email-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="[email protected]">
</div>
<div>
<label for="password-input" class="block text-sm font-medium text-gray-700 mb-1">Password Input</label>
<input type="password" id="password-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="••••••••">
</div>
<div>
<label for="number-input" class="block text-sm font-medium text-gray-700 mb-1">Number Input</label>
<input type="number" id="number-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="123">
</div>
</div>
</div>
<!-- Input with Icons -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Inputs with Icons</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Search with left icon -->
<div>
<label for="search-input" class="block text-sm font-medium text-gray-700 mb-1">Search</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>
</div>
<input type="search" id="search-input" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Search...">
</div>
</div>
<!-- Email with left icon -->
<div>
<label for="email-icon" class="block text-sm font-medium text-gray-700 mb-1">Email with Icon</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
</div>
<input type="email" id="email-icon" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="[email protected]">
</div>
</div>
<!-- Password with right icon button -->
<div>
<label for="password-icon" class="block text-sm font-medium text-gray-700 mb-1">Password with Toggle</label>
<div class="relative">
<input type="password" id="password-icon" class="w-full px-3 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="••••••••">
<button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center">
<svg class="h-5 w-5 text-gray-400 hover:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
</svg>
</button>
</div>
</div>
<!-- URL with prefix -->
<div>
<label for="url-input" class="block text-sm font-medium text-gray-700 mb-1">URL Input</label>
<div class="flex">
<span class="inline-flex items-center px-3 border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm rounded-l-lg">
https://
</span>
<input type="text" id="url-input" class="flex-1 px-3 py-2 border border-gray-300 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="www.example.com">
</div>
</div>
</div>
</div>
<!-- Validation States -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Validation States</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Success state -->
<div>
<label for="success-input" class="block text-sm font-medium text-gray-700 mb-1">Success State</label>
<div class="relative">
<input type="text" id="success-input" class="w-full px-3 py-2 border-2 border-green-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" value="[email protected]">
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
</div>
</div>
<p class="mt-1 text-sm text-green-600">Email is valid</p>
</div>
<!-- Error state -->
<div>
<label for="error-input" class="block text-sm font-medium text-gray-700 mb-1">Error State</label>
<div class="relative">
<input type="text" id="error-input" class="w-full px-3 py-2 border-2 border-red-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" value="invalid-email">
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</div>
</div>
<p class="mt-1 text-sm text-red-600">Please enter a valid email address</p>
</div>
<!-- Warning state -->
<div>
<label for="warning-input" class="block text-sm font-medium text-gray-700 mb-1">Warning State</label>
<input type="text" id="warning-input" class="w-full px-3 py-2 border-2 border-yellow-500 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent" value="weak-password">
<p class="mt-1 text-sm text-yellow-600">Password strength: Weak</p>
</div>
<!-- Disabled state -->
<div>
<label for="disabled-input" class="block text-sm font-medium text-gray-400 mb-1">Disabled State</label>
<input type="text" id="disabled-input" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-gray-100 text-gray-500 cursor-not-allowed" value="Disabled input" disabled>
<p class="mt-1 text-sm text-gray-500">This field is disabled</p>
</div>
</div>
</div>
<!-- Textarea -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Textarea</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="textarea-basic" class="block text-sm font-medium text-gray-700 mb-1">Basic Textarea</label>
<textarea id="textarea-basic" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none" placeholder="Enter your message..."></textarea>
</div>
<div>
<label for="textarea-counter" class="block text-sm font-medium text-gray-700 mb-1">Textarea with Counter</label>
<textarea id="textarea-counter" rows="4" maxlength="200" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none" placeholder="Max 200 characters..."></textarea>
<p class="mt-1 text-sm text-gray-500 text-right">0 / 200</p>
</div>
</div>
</div>
<!-- Floating Labels -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Floating Labels</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="relative">
<input type="text" id="floating-name" class="peer w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent placeholder-transparent" placeholder="Name">
<label for="floating-name" class="absolute left-3 -top-2.5 bg-white px-1 text-sm text-gray-600 transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-2.5 peer-focus:text-sm peer-focus:text-purple-600">
Full Name
</label>
</div>
<div class="relative">
<input type="email" id="floating-email" class="peer w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent placeholder-transparent" placeholder="Email">
<label for="floating-email" class="absolute left-3 -top-2.5 bg-white px-1 text-sm text-gray-600 transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 peer-focus:-top-2.5 peer-focus:text-sm peer-focus:text-purple-600">
Email Address
</label>
</div>
</div>
</div>
<!-- Input Sizes -->
<div>
<h3 class="text-lg font-semibold text-gray-900 mb-4">Input Sizes</h3>
<div class="space-y-3">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Small</label>
<input type="text" class="w-full px-2.5 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Small input">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Medium (Default)</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Medium input">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Large</label>
<input type="text" class="w-full px-4 py-3 text-lg border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Large input">
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-6 mt-12">
<div class="container mx-auto px-4 text-center">
<p class="text-gray-400 text-sm">Dashboard Component Library © 2025</p>
</div>
</footer>
</body>
</html>