Lineone - From Input Group

Input Group

Forms
Input Group

Input Group

Code

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. Check out code for detail of usage.

Prepend Addon: @

Append Addon: @site.com

Between input: $ .00

                
  <div>
    <span>Prepend Addon:</span>
    <label class="mt-1.5 flex space-x-reverse -space-x-px">
      <span
        class="flex items-center justify-center rounded-r-lg border border-slate-300 px-3.5 font-inter dark:border-navy-450"
      >
        <span class="-mt-1">@</span>
      </span>
      <input
        class="form-input w-full rounded-l-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
        placeholder="Username"
        type="text"
      />
    </label>
  </div>
  <div>
    <span>Append Addon:</span>
    <label class="mt-1.5 flex space-x-reverse -space-x-px">
      <input
        class="form-input w-full rounded-r-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
        placeholder="Username"
        type="text"
      />
      <span
        class="flex items-center justify-center rounded-l-lg border border-slate-300 px-3.5 font-inter dark:border-navy-450"
      >
        <span>@site.com</span>
      </span>
    </label>
  </div>
  <div>
    <span>Between input:</span>
    <label class="mt-1 flex space-x-reverse -space-x-px">
      <span
        class="flex items-center justify-center rounded-r-lg border border-slate-300 px-3.5 font-inter dark:border-navy-450"
      >
        <span>$</span>
      </span>
      <input
        class="form-input w-full border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
        placeholder="Enter Price"
        type="text"
      />
      <span
        class="flex items-center justify-center rounded-l-lg border border-slate-300 px-3.5 font-inter dark:border-navy-450"
      >
        <span>.00</span>
      </span>
    </label>
  </div>

Filled Addon

Code

Input addon can be filled. Check out code for detail of usage.

Between input: $ .00

                
  <div>
    <span>Between input:</span>
    <label class="mt-1 flex space-x-reverse -space-x-px">
      <span
        class="flex items-center justify-center rounded-r-lg border border-slate-300 bg-slate-150 px-3.5 font-inter text-slate-800 dark:border-navy-450 dark:bg-navy-500 dark:text-navy-100"
      >
        <span>$</span>
      </span>
      <input
        class="form-input w-full border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
        placeholder="Enter price"
        type="text"
      />
      <span
        class="flex items-center justify-center rounded-l-lg border border-slate-300 bg-slate-150 px-3.5 font-inter text-slate-800 dark:border-navy-450 dark:bg-navy-500 dark:text-navy-100"
      >
        <span>.00</span>
      </span>
    </label>
  </div>

Merged Addon

Code

Input addon can be merged. Check out code for detail of usage.

                
  <label class="relative flex">
    <input
      class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pr-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Search here..."
      type="text"
    />
    <span
      class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4.5 transition-colors duration-200"
        fill="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z"
        />
      </svg>
    </span>
  </label>
  <label class="relative flex">
    <input
      class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pr-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Password"
      type="text"
    />
    <span
      class="pointer-events-none absolute right-0 flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
    >
      <svg fill="currentColor" class="size-4.5" viewBox="0 0 20 20">
        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
        <path
          fill-rule="evenodd"
          d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
          clip-rule="evenodd"
        />
      </svg>
    </span>
  </label>
  <div class="relative flex">
    <input
      class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-9 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Search here..."
      type="text"
    />
    <span
      class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-4.5 transition-colors duration-200"
        fill="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z"
        />
      </svg>
    </span>
    <div
      class="pointer-events-none absolute left-0 flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
    >
      <div
        class="spinner size-5 animate-spin rounded-full border-2 border-slate-150 border-r-slate-400 dark:border-navy-500 dark:border-r-navy-300"
      ></div>
    </div>
  </div>

More Examples

Code

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. Check out code for detail of usage.

                
  <div
    x-data="{
        config:{
            numeral: true,
            numeralThousandsGroupStyle: 'thousand'
        }
    }"
    class="mt-5"
  >
    <div class="flex space-x-reverse -space-x-px">
      <select
        class="form-select rounded-r-full border border-slate-300 bg-white px-3 py-2 pl-9 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent"
        x-model="config.numeralThousandsGroupStyle"
      >
        <option value="thousand">Thousands</option>
        <option value="lakh">Indian lakh</option>
        <option value="wan">Chinese wan</option>
      </select>

      <input
        x-input-mask="config"
        class="form-input w-full rounded-l-full border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
        placeholder="Enter Phone"
        type="text"
      />
    </div>
  </div>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Input Group

Input Group

Filled Addon

Merged Addon

More Examples