Input
Below you can find a input component styled with tailwindcss.
Input - Icon Start/End
- Preview
- HTML
- React
Copy
<div>
<label class="block text-xs text-neutral-500 mb-1">Label</label>
<div class="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300">
<input placeholder="Input placeholder" class="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-2 px-2 text-sm pl-[48px]">
<span class="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first left-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
<span class="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded right-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
</div>
</div>
Copy
<div>
<label className="block text-xs text-neutral-500 mb-1">Label</label>
<div className="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300">
<input placeholder="Input placeholder" className="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-2 px-2 text-sm pl-[48px]" />
<span className="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first left-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
<span className="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded right-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
</div>
</div>Input
- Preview
- HTML
- React
Copy
<div>
<label class="block text-xs text-neutral-500 mb-1">Label</label>
<div class="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300">
<input placeholder="Input placeholder" class="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-2 px-2 text-sm pl-4">
</div>
</div>
Copy
<div>
<label className="block text-xs text-neutral-500 mb-1">Label</label>
<div className="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300">
<input placeholder="Input placeholder" className="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-2 px-2 text-sm pl-4" />
</div>
</div>Input - Icon Start
- Preview
- HTML
- React
Copy
<div>
<label class="block text-xs text-neutral-500 mb-1">Label</label>
<div class="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300">
<input placeholder="Input placeholder" class="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-2 px-2 text-sm pl-[48px]">
<span class="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first left-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
</div>
</div>
Copy
<div>
<label className="block text-xs text-neutral-500 mb-1">Label</label>
<div className="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300">
<input placeholder="Input placeholder" className="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-2 px-2 text-sm pl-[48px]" />
<span className="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first left-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
</div>
</div>Input - Icon End
- Preview
- HTML
- React
Copy
<div>
<label class="block text-xs text-neutral-500 mb-1">Label</label>
<div class="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300">
<input placeholder="Input placeholder" class="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-2 px-2 text-sm pl-4">
<span class="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded right-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
</div>
</div>
Copy
<div>
<label className="block text-xs text-neutral-500 mb-1">Label</label>
<div className="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300">
<input placeholder="Input placeholder" className="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-2 px-2 text-sm pl-4" />
<span className="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded right-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
</div>
</div>Input - Icon Start/End - Disabled
- Preview
- HTML
- React
Copy
<div class="opacity-50">
<label class="block text-xs text-neutral-500 mb-1">Label</label>
<div class="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-neutral-200 border-neutral-500 hover:border-neutral-500 cursor-not-allowed">
<input placeholder="Input placeholder" class="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-2 px-2 text-sm pl-[48px]">
<span class="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first left-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
<span class="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded right-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
</div>
</div>
Copy
<div className="opacity-50">
<label className="block text-xs text-neutral-500 mb-1">Label</label>
<div className="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-neutral-200 border-neutral-500 hover:border-neutral-500 cursor-not-allowed">
<input placeholder="Input placeholder" className="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-2 px-2 text-sm pl-[48px]" />
<span className="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first left-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
<span className="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded right-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
</div>
</div>Input - Icon Start/End - Error
- Preview
- HTML
- React
Copy
<div>
<label class="block text-xs text-neutral-500 mb-1">Label</label>
<div class="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-danger hover:border-danger">
<input placeholder="Input placeholder" class="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-2 px-2 text-sm pl-[48px]">
<span class="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded bg-white order-first left-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
<span class="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded bg-white right-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
</div>
</div>
Copy
<div>
<label className="block text-xs text-neutral-500 mb-1">Label</label>
<div className="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-danger hover:border-danger">
<input placeholder="Input placeholder" className="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-2 px-2 text-sm pl-[48px]" />
<span className="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded bg-white order-first left-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
<span className="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded bg-white right-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
</div>
</div>Input - Icon Start/End - No Label
- Preview
- HTML
- React
Copy
<div>
<div class="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300">
<input placeholder="Input placeholder" class="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-2 px-2 text-sm pl-[48px]">
<span class="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first left-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
<span class="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded right-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
</div>
</div>
Copy
<div>
<div className="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300">
<input placeholder="Input placeholder" className="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-2 px-2 text-sm pl-[48px]" />
<span className="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first left-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
<span className="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded right-2">
<svg fill="none" viewbox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
</div>
</div>Input Small - Icon Start/End
- Preview
- HTML
- React
Copy
<div>
<label class="block text-xs text-neutral-500 mb-1">Label</label>
<div class="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300">
<input placeholder="Input placeholder" class="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-1 px-1 text-xs pl-4">
<span class="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first left-1">
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
<span class="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded right-1">
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
</div>
</div>
Copy
<div>
<label className="block text-xs text-neutral-500 mb-1">Label</label>
<div className="group relative flex rounded border outline-0 text-neutral-300 hover:text-neutral-600 focus-within:text-neutral-600 focus-within:border-brand-primary-500 hover:focus-within:border-brand-primary-500 disabled:text-danger bg-white border-neutral-200 hover:border-neutral-300">
<input placeholder="Input placeholder" className="peer rounded w-full pl-1 outline-none placeholder:text-neutral-300 group-hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 valid:text-neutral-600 disabled:bg-neutral-200 disabled:placeholder:text-neutral-500 group-hover:disabled:placeholder:text-neutral-500 disabled:cursor-not-allowed py-1 px-1 text-xs pl-4" />
<span className="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first left-1">
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
<span className="absolute top-[50%] translate-y-[-50%] flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded right-1">
<svg fill="none" viewbox="0 0 24 24" height="16" width="16" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1936 5.5809C16.5254 7.91272 16.5254 11.6933 14.1936 14.0252C11.8618 16.357 8.08117 16.357 5.74935 14.0252C3.41753 11.6933 3.41753 7.91272 5.74935 5.5809C8.08117 3.24908 11.8618 3.24908 14.1936 5.5809"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" stroke="currentColor" d="M14.1504 14.0596L20.0004 19.9896"></path>
</svg>
</span>
</div>
</div>Search input with label
- Preview
- HTML
- React
Copy
<label class="text-xs text-neutral-500">
Label
<div class="relative h-[56px] mt-1">
<input placeholder="Input placeholder" class="w-full h-[56px] pr-[48px] pl-2 bg-white outline-none text-neutral-600 hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 border-[1px] rounded-[4px] border-neutral-200 focus-visible:border-brand-primary-500 hover:border-neutral-300 peer text-xs py-[21px]">
<span class="absolute inset-y-0 right-0 flex items-center pr-2 stroke-neutral-300 peer-hover:stroke-neutral-600 peer-focus:stroke-neutral-600 peer-[&amp;:not(:placeholder-shown)]:hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" height="24" width="24">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M20.0034 20.0033L16.7521 16.752"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M16.0962 6.90377C18.6346 9.44214 18.6346 13.5578 16.0962 16.0962C13.5579 18.6346 9.44215 18.6346 6.90378 16.0962C4.36541 13.5578 4.36541 9.44214 6.90378 6.90377C9.44215 4.3654 13.5579 4.3654 16.0962 6.90377"></path>
</svg>
</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 stroke-brand-primary-500 peer-[&amp;:placeholder-shown]:hidden">
<svg stroke="#FF6D2A" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" height="6" width="6">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 8.99998L9 15"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 15L9 8.99998"></path>
</svg>
</span>
</div>
</label>
Copy
<label className="text-xs text-neutral-500">
Label
<div className="relative h-[56px] mt-1">
<input placeholder="Input placeholder" className="w-full h-[56px] pr-[48px] pl-2 bg-white outline-none text-neutral-600 hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 border-[1px] rounded-[4px] border-neutral-200 focus-visible:border-brand-primary-500 hover:border-neutral-300 peer text-xs py-[21px]" />
<span className="absolute inset-y-0 right-0 flex items-center pr-2 stroke-neutral-300 peer-hover:stroke-neutral-600 peer-focus:stroke-neutral-600 peer-[&amp;:not(:placeholder-shown)]:hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" height="24" width="24">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M20.0034 20.0033L16.7521 16.752"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M16.0962 6.90377C18.6346 9.44214 18.6346 13.5578 16.0962 16.0962C13.5579 18.6346 9.44215 18.6346 6.90378 16.0962C4.36541 13.5578 4.36541 9.44214 6.90378 6.90377C9.44215 4.3654 13.5579 4.3654 16.0962 6.90377"></path>
</svg>
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 stroke-brand-primary-500 peer-[&amp;:placeholder-shown]:hidden">
<svg stroke="#FF6D2A" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" height="6" width="6">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 8.99998L9 15"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 15L9 8.99998"></path>
</svg>
</span>
</div>
</label>Search input without label
- Preview
- HTML
- React
Copy
<label class="text-xs text-neutral-500">
<div class="relative h-[56px]">
<input placeholder="Input placeholder" class="w-full h-[56px] pr-[48px] pl-2 bg-white outline-none text-neutral-600 hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 border-[1px] rounded-[4px] border-neutral-200 focus-visible:border-brand-primary-500 hover:border-neutral-300 peer text-xs text-sm py-2">
<span class="absolute inset-y-0 right-0 flex items-center pr-2 stroke-neutral-300 peer-hover:stroke-neutral-600 peer-focus:stroke-neutral-600 peer-[&amp;:not(:placeholder-shown)]:hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" height="24" width="24">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M20.0034 20.0033L16.7521 16.752"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M16.0962 6.90377C18.6346 9.44214 18.6346 13.5578 16.0962 16.0962C13.5579 18.6346 9.44215 18.6346 6.90378 16.0962C4.36541 13.5578 4.36541 9.44214 6.90378 6.90377C9.44215 4.3654 13.5579 4.3654 16.0962 6.90377"></path>
</svg>
</span>
<span class="absolute inset-y-0 right-0 flex items-center pr-2 stroke-brand-primary-500 peer-[&amp;:placeholder-shown]:hidden">
<svg stroke="#FF6D2A" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" height="6" width="6">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 8.99998L9 15"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 15L9 8.99998"></path>
</svg>
</span>
</div>
</label>
Copy
<label className="text-xs text-neutral-500">
<div className="relative h-[56px]">
<input placeholder="Input placeholder" className="w-full h-[56px] pr-[48px] pl-2 bg-white outline-none text-neutral-600 hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 border-[1px] rounded-[4px] border-neutral-200 focus-visible:border-brand-primary-500 hover:border-neutral-300 peer text-xs text-sm py-2" />
<span className="absolute inset-y-0 right-0 flex items-center pr-2 stroke-neutral-300 peer-hover:stroke-neutral-600 peer-focus:stroke-neutral-600 peer-[&amp;:not(:placeholder-shown)]:hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" height="24" width="24">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M20.0034 20.0033L16.7521 16.752"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M16.0962 6.90377C18.6346 9.44214 18.6346 13.5578 16.0962 16.0962C13.5579 18.6346 9.44215 18.6346 6.90378 16.0962C4.36541 13.5578 4.36541 9.44214 6.90378 6.90377C9.44215 4.3654 13.5579 4.3654 16.0962 6.90377"></path>
</svg>
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 stroke-brand-primary-500 peer-[&amp;:placeholder-shown]:hidden">
<svg stroke="#FF6D2A" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" height="6" width="6">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 8.99998L9 15"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M15 15L9 8.99998"></path>
</svg>
</span>
</div>
</label>