Input
Below you can find a input component styled with tailwindcss.
Preview - Input - Icon Start/End
HTML
<div class>
<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 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 py-2 text-sm" placeholder="Input placeholder" required />
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 order-first pl-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 pr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>React
<div class>
<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 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 py-2 text-sm" placeholder="Input placeholder" required />
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 order-first pl-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 pr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>Preview - Input
HTML
<div class>
<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 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 py-2 text-sm" placeholder="Input placeholder" required />
</div>
</div>React
<div class>
<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 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 py-2 text-sm" placeholder="Input placeholder" required />
</div>
</div>Preview - Input - Icon Start
HTML
<div class>
<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 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 py-2 text-sm" placeholder="Input placeholder" required />
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 order-first pl-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>React
<div class>
<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 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 py-2 text-sm" placeholder="Input placeholder" required />
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 order-first pl-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>Preview - Input - Icon End
HTML
<div class>
<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 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 py-2 text-sm" placeholder="Input placeholder" required />
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 pr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>React
<div class>
<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 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 py-2 text-sm" placeholder="Input placeholder" required />
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 pr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>Preview - Input - Icon Start/End - Disabled
HTML
<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">
<input 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 py-2 text-sm" placeholder="Input placeholder" required disabled />
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 order-first pl-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 pr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>React
<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">
<input 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 py-2 text-sm" placeholder="Input placeholder" required disabled />
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 order-first pl-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 pr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>Preview - Input - Icon Start/End - Error
HTML
<div class>
<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 border-danger hover:border-danger">
<input 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 py-2 text-sm" placeholder="Input placeholder" required />
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 order-first pl-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 pr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>React
<div class>
<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 border-danger hover:border-danger">
<input 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 py-2 text-sm" placeholder="Input placeholder" required />
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 order-first pl-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 pr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>Preview - Input - Icon Start/End - No Label
HTML
<div class>
<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 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 py-2 text-sm" placeholder="Input placeholder" required />
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 order-first pl-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 pr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>React
<div class>
<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 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 py-2 text-sm" placeholder="Input placeholder" required />
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 order-first pl-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 pr-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>Preview - Input Small - Icon Start/End
HTML
<div class>
<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 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 py-1 text-xs" placeholder="Input placeholder" required />
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 order-first pl-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="16" height="16">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span class="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 pr-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="16" height="16">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>React
<div class>
<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 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 py-1 text-xs" placeholder="Input placeholder" required />
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 order-first pl-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="16" height="16">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<span className="flex items-center peer-valid:text-neutral-600 peer-disabled:text-neutral-500 pr-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="16" height="16">
<path 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" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M14.1504 14.0596L20.0004 19.9896" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
</div>
</div>