Lineone - From Input Mask

Input Mask

Code

An input mask is a string of characters that indicates the format of valid input values. The Cleave.js library is used for this purpose. See more on Github and to the code example below.

With Prefix:

                
  <label>
    <input
      x-input-mask="{
              prefix: 'Prefix',
              delimiter: '-',
              blocks: [6, 4, 4, 7],
          }"
      class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 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="Username"
      type="text"
    />
  </label>

Delimiters Formatting

Code

An input mask is a string of characters that indicates the format of valid input values. The Cleave.js library is used for this purpose. See more on Github and to the code example below.

With Delimiters Formatting:

                
  <label>
    <input
      x-input-mask="{
              delimiters: ['.', '_', '-'],
              blocks: [3, 2, 3, 3],
              uppercase: true
          }"
      class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 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="xxx.xx_xxx-xxx"
      type="text"
    />
  </label>

Credit Card

Code

An input mask is a string of characters that indicates the format of valid input values. The Cleave.js library is used for this purpose. See more on Github and to the code example below.

Enter Credit Card:

                
  <label>
    <input
      x-input-mask="{
              creditCard: true
          }"
      class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 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="xxxx xxxx xxxx xxxx"
      type="text"
    />
  </label>

DateTime Formatting

Code

An input mask is a string of characters that indicates the format of valid input values. The Cleave.js library is used for this purpose. See more on Github and to the code example below.

Date:

Time:

                
  <div>
    <span>Date:</span>
    <label>
      <input
        x-input-mask="{
            date: true,
            delimiter: '-',
            datePattern: ['m', 'd','Y']
          }"
        class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 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="Enter Date"
        type="text"
      />
    </label>
  </div>
  <div>
    <span>Time:</span>
    <label>
      <input
        x-input-mask="{
            time: true,
            timePattern: ['h', 'm', 's']
          }"
        class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 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="Enter Time"
        type="text"
      />
    </label>
  </div>

Phone Formatting

Code

An input mask is a string of characters that indicates the format of valid input values. The Cleave.js library is used for this purpose. See more on Github and to the code example below.

Phone Number: US (+1)

                
  <div>
    <span>Phone Number:</span>
    <label class="mt-1.5 flex -space-x-px">
      <span
        class="flex shrink-0 items-center justify-center rounded-l-lg border border-slate-300 px-3.5 font-inter dark:border-navy-450"
      >
        <span class="-mt-1">US (+1)</span>
      </span>
      <input
        x-input-mask="{
            numeric:true,
            blocks: [3, 2, 2, 2],
        }"
        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="Enter Phone"
        type="text"
      />
    </label>
  </div>

Numeral Formatting

Code

An input mask is a string of characters that indicates the format of valid input values. The Cleave.js library is used for this purpose. See more on Github and to the code example below.

                
  <div
    x-data="{
        config:{
            numeral: true,
            numeralThousandsGroupStyle: 'thousand'
        }
    }"
  >
    <label class="flex -space-x-px">
      <select
        class="form-select rounded-l-full border border-slate-300 bg-white px-3 py-2 pr-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-r-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"
      />
    </label>
  </div>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Input Mask

Input Mask

Delimiters Formatting

Credit Card

DateTime Formatting

Phone Formatting

Numeral Formatting