MijnUI

Default Input

The default input component without any icons or additional styles.

input.html

<div class="relative w-80">
  <input
    class="peer flex h-10 w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-text autofill:shadow-[inset_0_0_0px_1000px_hsl(var(--surface))] autofill:[-webkit-text-fill-color:hsl(hsl(--main-text))_!important] focus-visible:border-input-border focus-visible:outline-none focus-visible:ring-1"
    placeholder="Placeholder..."
    id="example-1"
  />
</div>

Input with Left Icon

This input component includes an icon aligned to the left, useful for inputs that benefit from context (e.g., search, email).

input-left-icon.html

<div class="relative w-80">
  <div class="absolute left-2 top-1/2 -translate-y-1/2 transform">
    <svg
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="text-muted-text"
      height="16"
      width="16"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M5 12h14"></path>
      <path d="M12 5v14"></path>
    </svg>
  </div>
 
  <input
    class="peer flex h-10 w-full rounded-md border bg-transparent px-3 py-2 pl-8 text-sm outline-none placeholder:text-muted-text autofill:shadow-[inset_0_0_0px_1000px_hsl(var(--surface))] autofill:[-webkit-text-fill-color:hsl(hsl(--main-text))_!important] focus-visible:border-input-border focus-visible:outline-none focus-visible:ring-1"
    id="example-2"
    placeholder="Username..."
  />
</div>

Input with Right Icon

An input component with an icon aligned to the right, often used for actions like clearing the input or password visibility toggles.

input-right-icon.html

<div class="relative w-80">
  <input
    class="peer flex h-10 w-full rounded-md border bg-transparent px-3 py-2 pr-8 text-sm outline-none placeholder:text-muted-text autofill:shadow-[inset_0_0_0px_1000px_hsl(var(--surface))] autofill:[-webkit-text-fill-color:hsl(hsl(--main-text))_!important] focus-visible:border-input-border focus-visible:outline-none focus-visible:ring-1"
    id="example-3"
    placeholder="Username..."
  />
 
  <div class="absolute right-3.5 top-1/2 -translate-y-1/2 transform">
    <svg
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="text-muted-text"
      height="16"
      width="16"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M5 12h14"></path>
      <path d="M12 5v14"></path>
    </svg>
  </div>
</div>

Input with Both Icons

This input component contains icons on both sides, providing both left and right visual cues or actions.

input-both-icon.html

<div class="relative w-80">
  <div class="absolute left-2 top-1/2 -translate-y-1/2 transform">
    <svg
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="text-muted-text"
      height="16"
      width="16"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M5 12h14"></path>
      <path d="M12 5v14"></path>
    </svg>
  </div>
 
  <input
    class="peer flex h-10 w-full rounded-md border bg-transparent px-3 py-2 pl-8 pr-8 text-sm outline-none placeholder:text-muted-text autofill:shadow-[inset_0_0_0px_1000px_hsl(var(--surface))] autofill:[-webkit-text-fill-color:hsl(hsl(--main-text))_!important] focus-visible:border-input-border focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
    id="example-4"
    placeholder="Username..."
  />
 
  <div class="absolute right-3.5 top-1/2 -translate-y-1/2 transform">
    <svg
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="text-muted-text"
      height="16"
      width="16"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M5 12h14"></path>
      <path d="M12 5v14"></path>
    </svg>
  </div>
</div>

Input with Floating Label

The floating label provides a minimalist design, where the label floats above the input field when it is in focus or has content.

Note: The floating label relies on the input’s placeholder state. For it to work correctly, the placeholder must be defined. If you don't want to display any placeholder value, you can set it to an empty string (placeholder=""). Alternatively, if you want to include a placeholder, you can specify a value (placeholder="user"). Without this, the floating label may not function as expected.

input-floating-label.html

<div class="relative w-80">
  <input
    class="peer flex h-10 w-full rounded-md border bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-text autofill:shadow-[inset_0_0_0px_1000px_rgb(hsl(--surface))] autofill:[-webkit-text-fill-color:rgb(hsl(--main-text))_!important] focus-visible:border-input-border focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
    id="example-5"
    placeholder=""
  />
 
  <label
    class="absolute start-2 top-2 z-10 max-w-fit origin-[0] -translate-y-4 scale-75 transform cursor-text bg-transparent px-2 text-sm font-medium text-muted-text duration-300 peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-focus:start-2 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:bg-main peer-focus:px-2 rtl:peer-focus:left-auto rtl:peer-focus:translate-x-1/4"
    for="example-5"
  >
    Username
  </label>
</div>

Input with Left Icon and Floating Label

This variation combines both a left-aligned icon and a floating label for enhanced visual context while keeping the input field clean.

input-floating-left-icon.html

<div class="relative w-80">
  <div class="absolute left-2 top-1/2 -translate-y-1/2 transform">
    <svg
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="text-muted-text"
      height="16"
      width="16"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M5 12h14"></path>
      <path d="M12 5v14"></path>
    </svg>
  </div>
 
  <input
    class="outline-noneplaceholder:text-muted-text peer flex h-10 w-full rounded-md border bg-transparent px-3 py-2 pl-8 text-sm autofill:shadow-[inset_0_0_0px_1000px_hsl(var(--surface))] autofill:[-webkit-text-fill-color:hsl(var(--main-text))_!important] focus-visible:border-input-border focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
    id="example-6"
    placeholder=" "
  />
 
  <label
    class="rtl:left absolute start-2 top-2 z-10 max-w-fit origin-[0] -translate-y-4 scale-75 transform cursor-text bg-main px-2 text-sm font-medium text-muted-text duration-300 rtl:translate-x-1/4"
    for="example-6"
  >
    Username
  </label>
</div>

Input with Right Icon and Floating Label

An input component with a floating label and a right-aligned icon, ideal for inputs where an action or icon is positioned at the end of the field.

input-floating-right-icon.html

<div class="relative w-80">
  <input
    class="peer flex h-10 w-full rounded-md border bg-transparent px-3 py-2 pr-8 text-sm outline-none placeholder:text-muted-text autofill:shadow-[inset_0_0_0px_1000px_hsl(var(--surface))] autofill:[-webkit-text-fill-color:hsl(var(--main-text))_!important] focus-visible:border-input-border focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
    id="example-7"
    placeholder=" "
  />
 
  <label
    class="rtl:left absolute start-2 top-2 z-10 max-w-fit origin-[0] -translate-y-4 scale-75 transform cursor-text bg-main px-2 text-sm font-medium text-muted-text duration-300 rtl:translate-x-1/4"
    for="example-7"
  >
    Username
  </label>
 
  <div class="absolute right-3.5 top-1/2 -translate-y-1/2 transform">
    <svg
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="text-muted-text"
      height="16"
      width="16"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M5 12h14"></path>
      <path d="M12 5v14"></path>
    </svg>
  </div>
</div>

Input with Both Icons and Floating Label

This combines both left and right icons with a floating label for inputs that need dual context or actions along with a sleek floating label design.

input-floating-both-icon.html

<div class="relative w-80">
  <div class="absolute left-2 top-1/2 -translate-y-1/2 transform">
    <svg
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="text-muted-text"
      height="16"
      width="16"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M5 12h14"></path>
      <path d="M12 5v14"></path>
    </svg>
  </div>
 
  <input
    class="peer flex h-10 w-full rounded-md border bg-transparent px-3 py-2 pl-8 pr-8 text-sm outline-none placeholder:text-muted-text autofill:shadow-[inset_0_0_0px_1000px_hsl(var(--surface))] autofill:[-webkit-text-fill-color:hsl(var(--main-text))_!important] focus-visible:border-input-border focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
    id="example-8"
    placeholder=" "
  />
 
  <label
    class="rtl:left absolute start-2 top-2 z-10 max-w-fit origin-[0] -translate-y-4 scale-75 transform cursor-text bg-main px-2 text-sm font-medium text-muted-text duration-300 rtl:translate-x-1/4"
    for="example-8"
  >
    Username
  </label>
 
  <div class="absolute right-3.5 top-1/2 -translate-y-1/2 transform">
    <svg
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      viewBox="0 0 24 24"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="text-muted-text"
      height="16"
      width="16"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M5 12h14"></path>
      <path d="M12 5v14"></path>
    </svg>
  </div>
</div>

Input

On this page