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-0 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"></input>
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first pl-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded pr-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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-0 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"></input>
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first pl-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded pr-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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 pl-2">
<input placeholder="Input placeholder" class="peer rounded w-full pl-1 outline-0 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"></input>
</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 pl-2">
<input placeholder="Input placeholder" className="peer rounded w-full pl-1 outline-0 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"></input>
</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-0 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"></input>
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first pl-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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-0 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"></input>
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first pl-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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 pl-2">
<input placeholder="Input placeholder" class="peer rounded w-full pl-1 outline-0 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"></input>
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded pr-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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 pl-2">
<input placeholder="Input placeholder" className="peer rounded w-full pl-1 outline-0 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"></input>
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded pr-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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-0 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"></input>
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first pl-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded pr-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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-0 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"></input>
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first pl-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded pr-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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-0 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"></input>
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded bg-white order-first pl-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded bg-white pr-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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-0 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"></input>
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded bg-white order-first pl-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded bg-white pr-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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-0 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"></input>
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first pl-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded pr-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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-0 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"></input>
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first pl-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded pr-2">
<svg height="24" width="24" fill="none" viewbox="0 0 24 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-0 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"></input>
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first pl-1">
<svg height="16" width="16" fill="none" viewbox="0 0 24 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="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded pr-1">
<svg height="16" width="16" fill="none" viewbox="0 0 24 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-0 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"></input>
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded order-first pl-1">
<svg height="16" width="16" fill="none" viewbox="0 0 24 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="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 rounded pr-1">
<svg height="16" width="16" fill="none" viewbox="0 0 24 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>
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 text-neutral-600 hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 border-[1px] rounded-[4px] border-neutral-200 outline-brand-primary-500 hover:border-neutral-300 peer text-xs py-[21px]"></input>
<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" fill="none" viewbox="0 0 8 8" height="6" width="6" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M6.99998 0.999969L0.999985 6.99997"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M6.99998 6.99997L0.999985 0.999969"></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 text-neutral-600 hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 border-[1px] rounded-[4px] border-neutral-200 outline-brand-primary-500 hover:border-neutral-300 peer text-xs py-[21px]"></input>
<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" fill="none" viewbox="0 0 8 8" height="6" width="6" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M6.99998 0.999969L0.999985 6.99997"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M6.99998 6.99997L0.999985 0.999969"></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 text-neutral-600 hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 border-[1px] rounded-[4px] border-neutral-200 outline-brand-primary-500 hover:border-neutral-300 peer text-xs text-sm py-2"></input>
<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" fill="none" viewbox="0 0 8 8" height="6" width="6" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M6.99998 0.999969L0.999985 6.99997"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M6.99998 6.99997L0.999985 0.999969"></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 text-neutral-600 hover:placeholder:text-neutral-600 focus:placeholder:text-neutral-600 border-[1px] rounded-[4px] border-neutral-200 outline-brand-primary-500 hover:border-neutral-300 peer text-xs text-sm py-2"></input>
<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" fill="none" viewbox="0 0 8 8" height="6" width="6" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M6.99998 0.999969L0.999985 6.99997"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.2" stroke="#FF6D2A" d="M6.99998 6.99997L0.999985 0.999969"></path>
</svg>
</span>
</div>
</label>