<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 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>

                

                  
  <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-plus text-slate-400 dark:text-navy-300"
    >This is a help text</span
  >
                

                  
  <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 w-full rounded-lg bg-slate-150 px-3 py-2 ring-primary/50 placeholder:text-slate-400 hover:bg-slate-200 focus:ring-3 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>

              

                
  <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-plus 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>

              

                
  <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>

              

                
  <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-plus text-slate-400 dark:text-navy-300"
    >This is a disabled input text</span
  >
              

                
  <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-plus 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-plus text-error">Username is invalid</span>
  </div>

              

                
  <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>

              

                
  <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>