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>