Lineone - From Input Text

Basic Input Text

Code

The input element with a type attribute whose value is "text" represents a one-line plain text edit control for the input element’s value. Check out code for detail of usage.

                
  <label class="block">
    <input
      class="form-input 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>

Label Text

Code

The label represents a caption for an item in a user interface. Check out code for detail of usage.

Choose Username:

                  
  <label class="block">
    <span>Choose Username:</span>
    <input
      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>

Helper Text

Code

Helper text conveys additional guidance about the input field, such as how it will be used. Check out code for detail of usage.

This is a help text

                  
  <label class="block">
    <input
      class="form-input 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>
  <span class="text-tiny+ text-slate-400 dark:text-navy-300"
    >This is a help text</span
  >

Rounded Input

Code

Input text can have a rounded shape. To do this, you should use the rounded-full utility. Check out code for detail of usage.

                  
  <label class="block">
    <input
      class="form-input w-full rounded-full border border-slate-300 bg-transparent px-4 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>

Filled Input

Code

Inputs can be filled. Check out code for detail of usage.

                
  <label class="block">
    <input
      class="form-input w-full rounded-lg bg-slate-150 px-3 py-2 ring-primary/50 placeholder:text-slate-400 hover:bg-slate-200 focus:ring dark:bg-navy-900/90 dark:ring-accent/50 dark:placeholder:text-navy-300 dark:hover:bg-navy-900 dark:focus:bg-navy-900"
      placeholder="Username"
      type="text"
    />
  </label>

Input Size

Code

Input text can have various sizes. Check out code for detail of usage.

                
  <label class="block">
    <input
      class="form-input h-8 w-full rounded-full border border-slate-300 bg-transparent px-4 py-2 text-xs+ 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>
  <label class="block">
    <input
      class="form-input w-full rounded-full border border-slate-300 bg-transparent px-4 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>
  <label class="block">
    <input
      class="form-input h-12 w-full rounded-full border border-slate-300 bg-transparent px-4 py-2 text-base 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>

Input Dataset

Code

A datalist with pre-defined options (connected to an <input> element): Check out code for detail of usage.

                
  <label class="block">
    <input
      class="form-input 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="Choose browser"
      type="text"
      list="browsers"
    />
    <datalist id="browsers">
      <option value="Google Chrome"></option>
      <option value="Edge"></option>
      <option value="Firefox"></option>
      <option value="Safari"></option>
      <option value="Opera"></option>
    </datalist>
  </label>

Disabled Text Input

Code

Disabled text input have their own style when disabled. Check out code for detail of usage.

This is a disabled input text

                
  <label class="block">
    <input
      disabled
      class="form-input 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 disabled:pointer-events-none disabled:select-none disabled:border-none disabled:bg-zinc-100 dark:border-navy-450 dark:bg-navy-600 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Disabled"
      type="text"
    />
  </label>
  <span class="text-tiny+ text-slate-400 dark:text-navy-300"
    >This is a disabled input text</span
  >

Input Validation

Code

You can validate the input text value using any validation libraries. Check out code for detail of usage.

Username is valid

Username is invalid

                
  <div>
    <label class="block">
      <input
        class="form-input w-full rounded-lg border border-success bg-transparent px-3 py-2 placeholder:text-slate-400/70"
        placeholder="Username"
        type="text"
        value="Some Value"
      />
    </label>
    <span class="text-tiny+ text-success">Username is valid</span>
  </div>
  <div>
    <label class="block">
      <input
        class="form-input w-full rounded-lg border border-error bg-transparent px-3 py-2 placeholder:text-slate-400/70"
        placeholder="Username"
        type="text"
        value="Some Value"
      />
    </label>
    <span class="text-tiny+ text-error">Username is invalid</span>
  </div>

Debounce Support

Code

By adding .debounce to x-model, you can easily debounce the updating of bound input. Check out code for detail of usage.

Value:

                
  <div x-data="{debounceText:''}">
    <label class="block">
      <input
        class="form-input 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"
        x-model.debounce="debounceText"
      />
    </label>
    <p class="mt-1">Value: <span x-text="debounceText"></span></p>
  </div>

Lazy Support

Code

By adding the .lazy modifier, you can force an x-model input to only update the property when user focuses away from the input element. Check out code for detail of usage.

Value:

                
  <div x-data="{lazyText:''}">
    <label class="block">
      <input
        class="form-input 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"
        x-model.lazy="lazyText"
      />
    </label>
    <p class="mt-1">Value: <span x-text="lazyText"></span></p>
  </div>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Input Text

Basic Input Text

Label Text

Helper Text

Rounded Input

Filled Input

Input Size

Input Dataset

Disabled Text Input

Input Validation

Debounce Support

Lazy Support