Kanban

Analytics

Chat

Files

Crypto

Banking

Todo

Orders

Recent

View All
Chat App
File Manager App
Email App
Kanban Board
Todo App
Crypto Dashboard
Banking Dashboard
Analytics Dashboard
Influencer Dashboard

25 May, 2022

Projects

Activity

## Banking cards

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

$2,139.22

**** **** **** 8945

## Pinned Apps

Kanban

Analytics

Chat

Files

Banking

11.3 hr

Working Hours

71%

13 /22

Completed tasks

49%

## Stock Market

## BTC

Bitcoin

60.33$

+3.3%

## SOL

Solana

20.56$

+4.11%

## Latest News

What is Tailwind CSS?

John D.

2 min read

Tailwind CSS Card Example

Travis F.

5 min read

10 Tips for Making a Good Camera Even Better

Alfredo E .

4 min read

## Settings

Dark Mode Monochrome Mode

35GB of 1TB

Upgrade

14

Pending

36

Completed

143

In Progress

279

Total

LMS App Design

Updated at 7 Sep

25%

jd

Store Dashboard

Updated at 11 Sep

49%

dv

Chat Mobile App

Updated at 19 Sep

13%

gt

NFT Marketplace App

Updated at 5 Sep

78%

jd

Today

6hr 22m

1. User Photo Changed

   12 minute ago

   John Doe changed his avatar photo

2. Images Added

   1 hour ago

   Mores Clarke added new image gallery

   Category: #Tag #Category

3. Design Completed

   3 hours ago

   Robert Nolan completed the design of the CRM application

   File_final.fig
   UI/UX CRM Dashboard

4. ER Diagram

   a day ago

   Team completed the ER diagram app

   Members:

   jd

5. Weekly Report

   a day ago

   The weekly report was uploaded

## Input Text

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

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

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

      <div>
        <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:hover:border-navy-400 dark:focus:border-accent dark:disabled:bg-navy-600"
            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>

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

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