Complete class customization guide for TW elements: Step-by-step instructions

Introduction

You can effortlessly enhance the aesthetics of the components by applying your own classes to the HTML elements either through attributes or by utilizing JavaScript during initialization.

Detailed information regarding which classes can be customized and how to achieve this for specific components can be found in the documentation of each component, under the Classes section within the API tab.

This section provides comprehensive guidance on customizing components using classes.

Customizable classes in Input

The table with all classes included in Input component is available in the API tab.

Note: Whether you overwrite a class or add your own, you must always add the original one.

Looking at the example below, we only changed the frame color. But this rule applies to each of the implemented classes. Let's take a look:

data-twe-class-notch-leading-normal (or notchLeadingNormal as an option), data-twe-class-notch-middle-normal (or notchMiddleNormal as an option) and data-twe-class-notch-trailing-normal (or notchTrailingNormal as an option) - these are the names of the attributes that we want to change.
border-neutral-300 - this is the class that we want to replace with border-red-500.
dark:border-neutral-600 - this is the class that we also want replace with border-red-500. It is for dark mode.

Customization via data attributes

If you want add anything new (like new color, size or something else) or edit class which is already inside, copy all of them and then add an attribute started with data-twe-class- - after that goes name from the table. For example: data-twe-class-notch-leading-normal. Important: Every data attribute has to be written in kebab-case method!

Example label

HTML
javascript

        
            
      <div
        class="relative mb-3 xl:w-96"
        data-twe-input-wrapper-init
        data-twe-class-notch-leading-normal="border-red-500 dark:border-red-500 group-data-[twe-input-focused]:shadow-[-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca] group-data-[twe-input-focused]:border-primary"
        data-twe-class-notch-middle-normal="border-red-500 dark:border-red-500 group-data-[twe-input-focused]:shadow-[0_1px_0_0_#3b71ca] group-data-[twe-input-focused]:border-primary"
        data-twe-class-notch-trailing-normal="border-red-500 dark:border-red-500 group-data-[twe-input-focused]:shadow-[1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca] group-data-[twe-input-focused]:border-primary">
        <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-neutral-200 dark:placeholder:text-neutral-200 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-200 dark:peer-focus:text-primary"
          >Example label
        </label>
      </div>

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

Customization via JavaScript

Note: Sometimes a component also allows you to modify the available options. If so, and you don't want to pass any other modifiers there, just pass an empty object as an argument.

In case you initialize your component using JS, you need to approach the topic a bit differently: adding classes as an argument.

Example label

html
javascript
umd

ES UMD

        
            
      <div id="myInput" class="relative mb-3">
        <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-neutral-200 dark:placeholder:text-neutral-200 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-200 dark:peer-focus:text-primary"
          >Example label
        </label>
      </div>

        
            
      const myInput = new Input(
        document.getElementById("myInput"),
        {},
        {
          notchLeadingNormal: "border-red-500 dark:border-red-500 group-data-[twe-input-focused]:shadow-[-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca] group-data-[twe-input-focused]:border-primary",
          notchMiddleNormal: "border-red-500 dark:border-red-500 group-data-[twe-input-focused]:shadow-[0_1px_0_0_#3b71ca] group-data-[twe-input-focused]:border-primary",
          notchTrailingNormal: "border-red-500 dark:border-red-500 group-data-[twe-input-focused]:shadow-[1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca] group-data-[twe-input-focused]:border-primary"
        },
      );

        
            
      const myInput = new twe.Input(
        document.getElementById("myInput"),
        {},
        {
          notchLeadingNormal: "border-red-500 dark:border-red-500 group-data-[twe-input-focused]:shadow-[-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca] group-data-[twe-input-focused]:border-primary",
          notchMiddleNormal: "border-red-500 dark:border-red-500 group-data-[twe-input-focused]:shadow-[0_1px_0_0_#3b71ca] group-data-[twe-input-focused]:border-primary",
          notchTrailingNormal: "border-red-500 dark:border-red-500 group-data-[twe-input-focused]:shadow-[1px_0_0_#3b71ca,_0_-1px_0_0_#3b71ca,_0_1px_0_0_#3b71ca] group-data-[twe-input-focused]:border-primary"
        },
      );

Class customization

Introduction

Customizable classes in Input

Customization via data attributes

Customization via JavaScript

Access restricted

To view this section you must have an active PRO account