Tailwind CSS Inputs

Use responsive inputs component with helper examples for number input, phone number, password, text input, disabled & more. Free download, open-source license.

Basic example

Forms is the most commonly used to enable users to log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks like collects user data and serves as the display or user interface within the system.

Form components help you to define the type of widget that is required to enter data and automatically adds a property to the resource endpoint to interact with the form component.

Example label

HTML
javascript

        
            
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlInput1"
          placeholder="Example label" />
        <label
          for="exampleFormControlInput1"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Example label
        </label>
      </div>

        
            
      // Initialization for ES Users
      import {
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Sizing

Use the following utility classes to create three different sizing options (large, base, and small) for form input elements.

Form control lg

Default input

Form control sm

HTML
javascript

        
            
      <!--Large input-->
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[2.15] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlInput2"
          placeholder="Form control lg" />
        <label
          for="exampleFormControlInput2"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[2.15] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[1.15rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[1.15rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Form control lg
        </label>
      </div>

      <!--Default input-->
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          placeholder="Default input" />
        <label
          for="exampleFormControlInpu3"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Default input
        </label>
      </div>

      <!--Small input-->
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.33rem] text-xs leading-[1.5] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlInput4"
          placeholder="Form control sm" />
        <label
          for="exampleFormControlInput4"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] text-xs leading-[1.5] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.75rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.75rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Form control sm
        </label>
      </div>

        
            
      // Initialization for ES Users
      import {
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });

Disabled

Add the disabled boolean attribute on an input with bg-neutral-100 classes to give it a neutraled out appearance and remove pointer events and make it unusable and un-clickable.

Disabled input

HTML
javascript

        
            
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-neutral-200 px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:bg-neutral-600 dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlInput5"
          placeholder="Disabled input"
          aria-label="Disabled input example"
          disabled />
        <label
          for="exampleFormControlInput5"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Disabled input
        </label>
      </div>

        
            
      // Initialization for ES Users
      import {
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });

Readonly

Use the following example to make the input readonly, so that you cannot edit the input.

Readonly input

HTML
javascript

        
            
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-neutral-200 px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:bg-neutral-600 dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlInput50"
          value="Readonly input here..."
          aria-label="readonly input example"
          readonly />
        <label
          for="exampleFormControlInput50"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Readonly input
        </label>
      </div>

        
            
      // Initialization for ES Users
      import {
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });

Text

Input types let you specified what data users should provide and help you validate it.

Text input

HTML
javascript

        
            
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlInputText"
          placeholder="Example label" />
        <label
          for="exampleFormControlInputText"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Text input
        </label>
      </div>

        
            
      // Initialization for ES Users
      import {
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });

Email

The input type="email" defines a field for an e-mail address. The input value is automatically validated to ensure it is a properly formatted e-mail address.

Email input

HTML
javascript

        
            
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <input
          type="email"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlInputEmail"
          placeholder="Example label" />
        <label
          for="exampleFormControlInputEmail"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Email input
        </label>
      </div>

        
            
      // Initialization for ES Users
      import {
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });

Password

The input type="password" defines a password field thus hiding characters as sensitive information.

Password input

HTML
javascript

        
            
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <input
          type="password"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlInputPassword"
          placeholder="Example label" />
        <label
          for="exampleFormControlInputPassword"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Password input
        </label>
      </div>

        
            
      // Initialization for ES Users
      import {
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });

Number

The input type="number" defines field for entering a number.

Number input

HTML
javascript

        
            
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <input
          type="number"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlInputNumber"
          placeholder="Example label" />
        <label
          for="exampleFormControlInputNumber"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Number input
        </label>
      </div>

        
            
      // Initialization for ES Users
      import {
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });

Phone number

The input type="tel" defines a field for entering a telephone number.

Phone input

HTML
javascript

        
            
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <input
          type="tel"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlInputTel"
          placeholder="Example label" />
        <label
          for="exampleFormControlInputTel"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Phone input
        </label>
      </div>

        
            
      // Initialization for ES Users
      import {
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });

URL

The input type="url" defines a field for entering a URL.

URL input

HTML
javascript

        
            
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <input
          type="url"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlInputURL"
          placeholder="Example label" />
        <label
          for="exampleFormControlInputURL"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >URL input
        </label>
      </div>

        
            
      // Initialization for ES Users
      import {
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });

Textarea

The textarea tag defines a multi-line text input control.

Example textarea

HTML
javascript

        
            
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <textarea
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlTextarea1"
          rows="4"
          placeholder="Your message"></textarea>
        <label
          for="exampleFormControlTextarea1"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Example textarea
        </label>
      </div>

        
            
      // Initialization for ES Users
      import {
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });

Helper text

Helper text conveys additional guidance about the input field, such as how it will be used.

Input

Text helper

HTML
javascript

        
            
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlInputHelper"
          placeholder="Example label" />
        <label
          for="exampleFormControlInputHelper"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Input
        </label>
        <div
          class="absolute w-full text-sm text-neutral-500"
          data-twe-input-helper-ref>
          Text helper
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });

Character counter

Add an empty form helper element, set data-twe-input-showcounter="true" for input and set the maxlength attribute to create a counter.

Example label

HTML
javascript

        
            
      <div class="relative mb-3" data-twe-input-wrapper-init>
        <input
          type="text"
          class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
          id="exampleFormControlInputCounter"
          placeholder="Example label"
          data-twe-input-showcounter="true"
          maxlength="20" />
        <label
          for="exampleFormControlInputCounter"
          class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Example label
        </label>
        <div
          class="absolute w-full text-sm text-neutral-500"
          data-twe-input-helper-ref></div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Input,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Input });

Floating label

Wrap a pair of input and label elements with .relative class and add classes as below to enable floating labels text-based form fields.

Email address

Password

HTML

        
            
      <!--Email input-->
      <div class="relative mb-3">
        <input
          type="email"
          class="peer m-0 block h-[58px] w-full rounded border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-4 text-base font-normal leading-tight text-neutral-700 transition duration-200 ease-linear placeholder:text-transparent focus:border-primary focus:pb-[0.625rem] focus:pt-[1.625rem] focus:text-neutral-700 focus:outline-none peer-focus:text-primary dark:border-neutral-400 dark:text-white dark:autofill:shadow-autofill dark:focus:border-primary dark:peer-focus:text-primary [&:not(:placeholder-shown)]:pb-[0.625rem] [&:not(:placeholder-shown)]:pt-[1.625rem]"
          id="floatingInput"
          placeholder="name@example.com" />
        <label
          for="floatingInput"
          class="pointer-events-none absolute left-0 top-0 origin-[0_0] border border-solid border-transparent px-3 py-4 text-neutral-500 transition-[opacity,_transform] duration-200 ease-linear peer-focus:-translate-y-2 peer-focus:translate-x-[0.15rem] peer-focus:scale-[0.85] peer-focus:text-primary peer-[:not(:placeholder-shown)]:-translate-y-2 peer-[:not(:placeholder-shown)]:translate-x-[0.15rem] peer-[:not(:placeholder-shown)]:scale-[0.85] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Email address</label
        >
      </div>

      <!--Password input-->
      <div class="relative mb-3">
        <input
          type="password"
          class="peer m-0 block h-[58px] w-full rounded border border-solid border-secondary-500 bg-transparent bg-clip-padding px-3 py-4 text-base font-normal leading-tight text-neutral-700 transition duration-200 ease-linear placeholder:text-transparent focus:border-primary focus:pb-[0.625rem] focus:pt-[1.625rem] focus:text-neutral-700 focus:shadow-twe-primary focus:outline-none peer-focus:text-primary dark:border-neutral-400 dark:text-white dark:autofill:shadow-autofill dark:focus:border-primary dark:peer-focus:text-primary [&:not(:placeholder-shown)]:pb-[0.625rem] [&:not(:placeholder-shown)]:pt-[1.625rem]"
          id="floatingPassword"
          placeholder="Password" />
        <label
          for="floatingPassword"
          class="pointer-events-none absolute left-0 top-0 origin-[0_0] border border-solid border-transparent px-3 py-4 text-neutral-500 transition-[opacity,_transform] duration-200 ease-linear peer-focus:-translate-y-2 peer-focus:translate-x-[0.15rem] peer-focus:scale-[0.85] peer-focus:text-primary peer-[:not(:placeholder-shown)]:-translate-y-2 peer-[:not(:placeholder-shown)]:translate-x-[0.15rem] peer-[:not(:placeholder-shown)]:scale-[0.85] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
          >Password</label
        >
      </div>

Name	Default	Description
`counter`	text-right leading-[1.6]	Sets text alignment and line height of input counter wrapper.
`notch`	group flex absolute left-0 top-0 w-full max-w-full h-full text-left pointer-events-none	Sets position and size of notches wrapper.
`notchLeading`	pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none left-0 top-0 h-full w-2 border-e-0 rounded-s-[0.25rem] group-data-[twe-input-focused]:border-e-0 group-data-[twe-input-state-active]:border-e-0	Sets main styles of the leading notch.
`notchLeadingNormal`	border-secondary-500 dark:border-neutral-400 group-data-[twe-input-focused]:shadow-notch-1 group-data-[twe-input-focused]:border-primary	Sets border and shadow of the default leading notch.
`notchLeadingWhite`	border-neutral-200 group-data-[twe-input-focused]:shadow-notch-1 group-data-[twe-input-focused]:shadow-white group-data-[twe-input-focused]:border-white	Sets border and shadow of the form white leading notch.
`notchMiddle`	pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow-0 shrink-0 basis-auto w-auto max-w-[calc(100%-1rem)] h-full border-e-0 border-s-0 group-data-[twe-input-focused]:border-x-0 group-data-[twe-input-state-active]:border-x-0 group-data-[twe-input-focused]:border-t group-data-[twe-input-state-active]:border-t group-data-[twe-input-focused]:border-solid group-data-[twe-input-state-active]:border-solid group-data-[twe-input-focused]:border-t-transparent group-data-[twe-input-state-active]:border-t-transparent	Sets main styles of the middle notch.
`notchMiddleNormal`	border-secondary-500 dark:border-neutral-400 group-data-[twe-input-focused]:shadow-notch-2 group-data-[twe-input-focused]:border-primary	Sets border and shadow of the default middle notch.
`notchMiddleWhite`	border-neutral-200 group-data-[twe-input-focused]:shadow-notch-2 group-data-[twe-input-focused]:shadow-white group-data-[twe-input-focused]:border-white	Sets border and shadow of the form white middle notch.
`notchTrailing`	pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow h-full border-s-0 rounded-e-[0.25rem] group-data-[twe-input-focused]:border-s-0 group-data-[twe-input-state-active]:border-s-0	Sets main styles of the trailing notch.
`notchTrailingNormal`	border-secondary-500 dark:border-neutral-400 group-data-[twe-input-focused]:shadow-notch-3 group-data-[twe-input-focused]:border-primary	Sets border and shadow of the default trailing notch.
`notchTrailingWhite`	border-neutral-200 group-data-[twe-input-focused]:shadow-notch-3 group-data-[twe-input-focused]:shadow-white group-data-[twe-input-focused]:border-white	Sets border and shadow of the form white trailing notch.

Method	Description	Example
`update`	Updates notches, activates the input	`myInput.update()`
`dispose`	Disposes a input instance	`myInput.dispose()`
`getInstance`	Static method which allows you to get the input instance associated to a DOM element.	`Input.getInstance(inputEl)`
`getOrCreateInstance`	Static method which returns the input instance associated to a DOM element or create a new one in case it wasn't initialized.	`Input.getOrCreateInstance(inputEl)`

Inputs

Basic example

Sizing

Disabled

Readonly

Text

Email

Password

Number

Phone number

URL

Textarea

Helper text

Character counter

Floating label

Inputs - API

Import

Via data attributes

Via JavaScript

Options

Classes

Methods

Access restricted

To view this section you must have an active PRO account

Inputs

Tailwind CSS Inputs

Basic example

Sizing

Disabled

Readonly

Text

Email

Password

Number

Phone number

URL

Textarea

Helper text

Character counter

Floating label

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Inputs - API

Import

Via data attributes

Via JavaScript

Options

Classes

Methods