Input
A clean, customizable Simple Input element created with TailwindCSS for clear, responsive, and accessible text input.
Example
example.tsx
export function Input() {
return (
<div className="rounded-[10px] bg-[#111111] border-2 border-[#27272A] px-3 py-2 md:px-5 md:py-3 gap-[10px] flex items-center justify-center focus-within:border-2 focus-within:border-[#1565C0] transition-colors min-w-max">
<input
type="text"
className="w-full placeholder:text-[#545353] bg-transparent outline-none"
placeholder="Search"
/>
</div>
);
}
Input with Icons
A stylish, customizable Input with Icons element designed with TailwindCSS for clear, responsive, and accessible text input using custom SVGs.
Example
example.tsx
function Icon() {
return (
<svg
className="size-6 opacity-30"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
/>
</svg>
);
}
export function Input() {
return (
<div className="flex flex-col gap-4">
<div className="rounded-[10px] border-2 bg-[#111111] border-[#27272A] px-3 py-2 md:px-5 md:py-3 gap-[10px] flex items-center justify-center focus-within:border-2 focus-within:border-[#1565C0] transition-colors min-w-max">
<Icon />
<input
type="password"
className="w-full placeholder:text-[#545353] bg-transparent outline-none"
placeholder="Password"
/>
</div>
<div className="rounded-[10px] bg-[#111111] border-2 border-[#27272A] px-3 py-2 md:px-5 md:py-3 gap-[10px] flex items-center justify-center focus-within:border-2 focus-within:border-[#1565C0] transition-colors min-w-max">
<input
type="password"
className="w-full placeholder:text-[#545353] bg-transparent outline-none"
placeholder="Password"
/>
<Icon />
</div>
</div>
);
}
File Input
A sleek, customizable File Input element designed with TailwindCSS for clear, responsive, and accessible file uploads.
Example
example.tsx
'use client';
import { useState } from 'react';
export function Input() {
const [files, setFiles] = useState<Array<File>>([]);
function handleOnChange(e: React.ChangeEvent<HTMLInputElement>) {
const files: File[] = Array.from(e.target.files!);
setFiles(files);
}
return (
<div className='flex flex-col gap-4 items-center'>
<div className='rounded-[10px] bg-[#111111] border-2 border-[#27272A] px-5 py-3 gap-[10px] flex items-center justify-center focus-within:border-2 focus-within:border-[#1565C0] transition-colors min-w-32 hover:cursor-pointer text-white'>
{files?.length == 0 ? (
<UploadIcon />
) : files?.length == 1 ? (
<FileIcon />
) : (
<MulFileIcon />
)}
<label
htmlFor='fileBtn'
className='w-full bg-transparent outline-none hover:cursor-pointer'
>
{files?.length == 0
? 'Select File(s)'
: files?.length == 1
? `${files[0].name}`
: `${files?.length} files selected`}
</label>
<input
className='hidden'
type='file'
id='fileBtn'
multiple
onChange={handleOnChange}
/>
</div>
</div>
);
}
function FileIcon() {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
strokeWidth={1.5}
stroke='currentColor'
className='size-6'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
d='M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z'
/>
</svg>
);
}
function MulFileIcon() {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
strokeWidth={1.5}
stroke='currentColor'
className='size-6'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75'
/>
</svg>
);
}
function UploadIcon() {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
strokeWidth={1.5}
stroke='currentColor'
className='size-6'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
d='M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5'
/>
</svg>
);
}
