Tailwind CSS Chips

Use responsive chips component with helper examples for tailwind tags chips, outline, placeholders, initial value & more. Free download, open-source license.

Basic example

Chips are compact elements that represent an input, attribute, or action.

The most common use will be used in some form of input, in fields, such as an entity or different attribute. You can add an optional close button so the user can easily close it or dismiss selected element.

Text

John Doe

HTML
javascript

        
            
      <div
        data-twe-chip-init
        data-twe-ripple-init
        class="[word-wrap: break-word] my-[5px] me-4 flex h-8 cursor-pointer items-center justify-between rounded-2xl bg-zinc-50 px-3 py-0 text-[13px] font-normal normal-case leading-loose text-surface shadow-none transition-[opacity] duration-300 ease-linear hover:!shadow-none dark:bg-neutral-700 dark:text-white"
        data-twe-close="true">
        Text
      </div>

      <div
        data-twe-chip-init
        data-twe-ripple-init
        class="[word-wrap: break-word] my-[5px] me-4 flex h-8 cursor-pointer items-center justify-between rounded-2xl bg-zinc-50 px-3 py-0 text-[13px] font-normal normal-case leading-loose text-surface shadow-none transition-[opacity] duration-300 ease-linear hover:!shadow-none dark:bg-neutral-700 dark:text-white">
        <img
          class="my-0 -ms-3 me-2 h-[inherit] w-[inherit] rounded-full"
          src="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
          alt="Contact Person" />
        John Doe
        <span
          data-twe-chip-close
          class="float-right w-4 cursor-pointer ps-1 text-[16px] text-black/30 opacity-[.53] transition-all duration-200 ease-in-out hover:text-black/50 dark:text-white/30 dark:hover:text-white/50 [&>svg]:h-4 [&>svg]:w-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12" />
          </svg>
        </span>
      </div>

      <div
        data-twe-chip-init
        data-twe-ripple-init
        class="[word-wrap: break-word] my-[5px] me-4 flex h-[42px] cursor-pointer items-center justify-between rounded-[21px] bg-zinc-50 px-3 py-0 text-[13px] font-normal normal-case leading-loose text-surface shadow-none transition-[opacity] duration-300 ease-linear hover:!shadow-none dark:bg-neutral-700 dark:text-white">
        <img
          class="my-0 -ms-3 me-2 h-[inherit] w-[inherit] rounded-full"
          src="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
          alt="Contact Person" />
        John Doe
        <span
          data-twe-chip-close
          class="float-right w-4 cursor-pointer ps-1 text-[16px] text-black/30 opacity-[.53] transition-all duration-200 ease-in-out hover:text-black/50 dark:text-white/30 dark:hover:text-white/50 [&>svg]:h-4 [&>svg]:w-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12" />
          </svg>
        </span>
      </div>

      <div
        data-twe-chip-init
        data-twe-ripple-init
        class="[word-wrap: break-word] my-[5px] me-4 flex h-[52px] cursor-pointer items-center justify-between rounded-[26px] bg-zinc-50 px-3 py-0 text-[13px] font-normal normal-case leading-loose text-surface shadow-none transition-[opacity] duration-300 ease-linear hover:!shadow-none dark:bg-neutral-700 dark:text-neutral-200">
        <img
          class="my-0 -ms-3 me-2 h-[inherit] w-[inherit] rounded-full"
          src="https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
          alt="Contact Person" />
        John Doe
        <span
          data-twe-chip-close
          class="float-right w-4 cursor-pointer ps-1 text-[16px] text-black/30 opacity-[.53] transition-all duration-200 ease-in-out hover:text-black/50 dark:text-white/30 dark:hover:text-white/50 [&>svg]:h-4 [&>svg]:w-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12" />
          </svg>
        </span>
      </div>

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

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!

Outline

You can use outline styling in your chips.

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

HTML
javascript

        
            
      <div
        data-twe-chip-init
        data-twe-ripple-init
        class="[word-wrap: break-word] my-[5px] me-4 flex h-8 cursor-pointer items-center justify-between rounded-2xl border border-primary bg-[transparent] px-3 py-0 text-[13px] font-normal normal-case leading-loose text-surface shadow-none transition-[opacity] duration-300 ease-linear hover:border-primary-600 hover:!shadow-none active:bg-zinc-50 dark:text-white active:dark:bg-neutral-700"
        data-twe-ripple-color="dark">
        Primary

        <span
          data-twe-chip-close
          class="float-right w-4 cursor-pointer ps-1 text-[16px] text-black/30 opacity-[.53] transition-all duration-200 ease-in-out hover:text-black/50 dark:text-white/30 dark:hover:text-white/50 [&>svg]:h-4 [&>svg]:w-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12" />
          </svg>
        </span>
      </div>
      <div
        data-twe-chip-init
        data-twe-ripple-init
        class="[word-wrap: break-word] my-[5px] me-4 flex h-8 cursor-pointer items-center justify-between rounded-2xl border border-secondary bg-[transparent] px-3 py-0 text-[13px] font-normal normal-case leading-loose text-surface shadow-none transition-[opacity] duration-300 ease-linear hover:border-secondary-600 hover:!shadow-none active:bg-zinc-50 dark:text-white active:dark:bg-neutral-700"
        data-twe-ripple-color="dark">
        Secondary

        <span
          data-twe-chip-close
          class="float-right w-4 cursor-pointer ps-1 text-[16px] text-black/30 opacity-[.53] transition-all duration-200 ease-in-out hover:text-black/50 dark:text-white/30 dark:hover:text-white/50 [&>svg]:h-4 [&>svg]:w-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12" />
          </svg>
        </span>
      </div>
      <div
        data-twe-chip-init
        data-twe-ripple-init
        class="[word-wrap: break-word] my-[5px] me-4 flex h-8 cursor-pointer items-center justify-between rounded-2xl border border-success bg-[transparent] px-3 py-0 text-[13px] font-normal normal-case leading-loose text-surface shadow-none transition-[opacity] duration-300 ease-linear hover:border-success-600 hover:!shadow-none active:bg-zinc-50 dark:text-white active:dark:bg-neutral-700"
        data-twe-ripple-color="dark">
        Success
        <span
          data-twe-chip-close
          class="float-right w-4 cursor-pointer ps-1 text-[16px] text-black/30 opacity-[.53] transition-all duration-200 ease-in-out hover:text-black/50 dark:text-white/30 dark:hover:text-white/50 [&>svg]:h-4 [&>svg]:w-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12" />
          </svg>
        </span>
      </div>
      <div
        data-twe-chip-init
        data-twe-ripple-init
        class=" [word-wrap: break-word] my-[5px] me-4 flex h-8 cursor-pointer items-center justify-between rounded-2xl border border-danger bg-[transparent] px-3 py-0 text-[13px] font-normal normal-case leading-loose text-surface shadow-none transition-[opacity] duration-300 ease-linear hover:border-danger-600 hover:!shadow-none active:bg-zinc-50 dark:text-white active:dark:bg-neutral-700"
        data-twe-ripple-color="dark">
        Danger
        <span
          data-twe-chip-close
          class="float-right w-4 cursor-pointer ps-1 text-[16px] text-black/30 opacity-[.53] transition-all duration-200 ease-in-out hover:text-black/50 dark:text-white/30 dark:hover:text-white/50 [&>svg]:h-4 [&>svg]:w-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12" />
          </svg>
        </span>
      </div>
      <div
        data-twe-chip-init
        data-twe-ripple-init
        class="[word-wrap: break-word] my-[5px] me-4 flex h-8 cursor-pointer items-center justify-between rounded-2xl border border-warning bg-[transparent] px-3 py-0 text-[13px] font-normal normal-case leading-loose text-surface shadow-none transition-[opacity] duration-300 ease-linear hover:border-warning-600 hover:!shadow-none active:bg-zinc-50 dark:text-white active:dark:bg-neutral-700"
        data-twe-ripple-color="dark">
        Warning
        <span
          data-twe-chip-close
          class="float-right w-4 cursor-pointer ps-1 text-[16px] text-black/30 opacity-[.53] transition-all duration-200 ease-in-out hover:text-black/50 dark:text-white/30 dark:hover:text-white/50 [&>svg]:h-4 [&>svg]:w-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12" />
          </svg>
        </span>
      </div>
      <div
        data-twe-chip-init
        data-twe-ripple-init
        class="[word-wrap: break-word] my-[5px] me-4 flex h-8 cursor-pointer items-center justify-between rounded-2xl border border-info bg-[transparent] px-3 py-0 text-[13px] font-normal normal-case leading-loose text-surface shadow-none transition-[opacity] duration-300 ease-linear hover:border-info-600 hover:!shadow-none active:bg-zinc-50 dark:text-white active:dark:bg-neutral-700"
        data-twe-ripple-color="dark">
        Info
        <span
          data-twe-chip-close
          class="float-right w-4 cursor-pointer ps-1 text-[16px] text-black/30 opacity-[.53] transition-all duration-200 ease-in-out hover:text-black/50 dark:text-white/30 dark:hover:text-white/50 [&>svg]:h-4 [&>svg]:w-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12" />
          </svg>
        </span>
      </div>
      <div
        data-twe-chip-init
        data-twe-ripple-init
        class="[word-wrap: break-word] my-[5px] me-4 flex h-8 cursor-pointer items-center justify-between rounded-2xl border border-neutral-200 bg-[transparent] px-3 py-0 text-[13px] font-normal normal-case leading-loose text-surface shadow-none transition-[opacity] duration-300 ease-linear hover:border-neutral-400 hover:!shadow-none active:bg-zinc-50 dark:text-white active:dark:bg-neutral-700"
        data-twe-ripple-color="dark">
        Light
        <span
          data-twe-chip-close
          class="float-right w-4 cursor-pointer ps-1 text-[16px] text-black/30 opacity-[.53] transition-all duration-200 ease-in-out hover:text-black/50 dark:text-white/30 dark:hover:text-white/50 [&>svg]:h-4 [&>svg]:w-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12" />
          </svg>
        </span>
      </div>
      <div
        data-twe-chip-init
        data-twe-ripple-init
        class="[word-wrap: break-word] my-[5px] me-4 flex h-8 cursor-pointer items-center justify-between rounded-2xl border border-neutral-800 bg-[transparent] px-3 py-0 text-[13px] font-normal normal-case leading-loose text-surface shadow-none transition-[opacity] duration-300 ease-linear hover:border-neutral-900 hover:!shadow-none active:bg-zinc-50 dark:text-white active:dark:bg-neutral-700"
        data-twe-ripple-color="dark">
        Dark
        <span
          data-twe-chip-close
          class="float-right w-4 cursor-pointer ps-1 text-[16px] text-black/30 opacity-[.53] transition-all duration-200 ease-in-out hover:text-black/50 dark:text-white/30 dark:hover:text-white/50 [&>svg]:h-4 [&>svg]:w-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="currentColor">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M6 18L18 6M6 6l12 12" />
          </svg>
        </span>
      </div>

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

Placeholder

Type a name and press enter to add a tag. Click X to remove it.

HTML
javascript

        
            
      <div
        data-twe-chips-input-init
        data-twe-chips-placeholder
        class="mb-0 min-h-[45px] border-none pb-0 shadow-none outline-none transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] hover:cursor-text"></div>

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

Initial Value

You can set initial tags with js options.

HTML
javascript
umd

ES UMD

        
            
        <div
          id="chips-initial"
          data-twe-chips-initial
          class="mb-0 min-h-[45px] border-none pb-0 shadow-none outline-none transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] hover:cursor-text"></div>

        
            
        import { ChipsInput } from "tw-elements";
        

        const chipsInitial = document.querySelector("#chips-initial");

        const chipsInitialInstance = new ChipsInput(chipsInitial, {
          initialValues: [
            { tag: "MDBReact" },
            { tag: "MDBAngular" },
            { tag: "MDBVue" },
            { tag: "MDB5" },
            { tag: "MDB" },
          ],
        });

        
            
        const chipsInitial = document.querySelector("#chips-initial");

        const chipsInitialInstance = new twe.ChipsInput(chipsInitial, {
          initialValues: [
            { tag: "MDBReact" },
            { tag: "MDBAngular" },
            { tag: "MDBVue" },
            { tag: "MDB5" },
            { tag: "MDB" },
          ],
        });

Content editable

You can set content editable with setting an option editable to true or with data-twe-attributes

HTML
javascript

        
            
      <div
        data-twe-chips-input-init
        data-twe-chips-placeholder
        class="mb-0 min-h-[45px] border-none pb-0 shadow-none outline-none transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] hover:cursor-text"
        data-twe-editable="true"></div>

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

Import

Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTWE method. If you are going to use the UMD format, just import the tw-elements package.

javascript
umd

ES UMD

        
            
        import { Chip, ChipsInput, initTWE } from "tw-elements";
        initTWE({ Chip, ChipsInput });

        
            
        import "tw-elements";

Usage

Via data attributes

Elements with the data-twe-chip-init and data-twe-chips-input-init attribute will be automatically initialized - you can set all available options with data attributes. For ES format, you must first import and call the initTWE method.

HTML

        
            
        <div
          data-twe-chip-init
          data-twe-ripple-init
          class="[word-wrap: break-word] my-[5px] me-4 flex h-8 cursor-pointer items-center justify-between rounded-2xl bg-zinc-50 px-3 py-0 text-[13px] font-normal normal-case leading-loose text-surface shadow-none transition-[opacity] duration-300 ease-linear hover:!shadow-none dark:bg-neutral-700 dark:text-white"
          data-twe-close="true">
          Text
        </div>

        <div class="flex w-full flex-wrap justify-center">
          <div
            data-twe-chips-input-init
            data-twe-chips-placeholder
            class="mb-0 min-h-[45px] border-none pb-0 shadow-none outline-none transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] hover:cursor-text"></div>
        </div>

        <div class="flex w-full flex-wrap justify-center">
          <div
            id="chips-initial"
            data-twe-chips-initial
            class="mb-0 min-h-[45px] border-none pb-0 shadow-none outline-none transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)] hover:cursor-text"></div>
        </div>

Via JavaScript

You can access an instance from your Javascript code, by using the getInstance static method of the ChipsInput class - it allows making use of all the public methods listed in the Methods section.

javascript
umd

ES UMD

        
                 
          const chipsInput = new ChipsInput(
            document.getElementById("chipsInputId"),
            options,
            classes
          );

          const chip = new Chip(
            document.getElementById("chipId"),
            options,
            classes
          );

        
            
          const chipsInput = new twe.ChipsInput(
            document.getElementById("chipsInputId"),
            options,
            classes
          );

          const chip = new twe.Chip(
            document.getElementById("chipId"),
            options,
            classes
          );

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-twe-, as in data-twe-editable="true".

Name	Type	Default	Description
`inputID`	string	`''`	Change input ID
`parentSelector`	''	`''`	Set parent selector to show chips.
`initialValues`	Array	`[{ tag: 'init1' }, {tag: 'init2' }]`	Add custom tags on init.
`editable`	Boolean	`false`	Change editable options to chips in `data-twe-chips-placeholder` or `data-twe-chips-initial`
`labelText`	String	`Example label`	Change label
`inputClasses`	Object	`{}`	Allows to pass the custom classes to the Input component. Used in ChipsInput.
`inputOptions`	Object	`{}`	Allows to pass the options to the Input component. Used in ChipsInput.

Classes

Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-twe-class, as in data-twe-class-transition="transition-all duration-300 ease-linear".

Name	Default	Description
`opacity`	opacity-0	Styles given during an element removal animation.
`inputWrapperPadding`	p-[5px]	Visual properties for an input wrapper element.
`transition`	transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]	Transition styles that appear when adding first chip to the input.
`contentEditable`	outline-none !border-[3px] !border-solid !border-[#b2b3b4]	Visual properties for a currently edited element.
`chipCloseIcon`	w-4 float-right cursor-pointer ps-1 text-[16px] dark:text-white/30 opacity-[.53] transition-all duration-200 ease-in-out hover:text-black/50 text-black/30 dark:hover:text-white/50 [&>svg]:h-4 [&>svg]:w-4	Styles for close chips button.
`chipElement`	flex justify-between items-center h-8 leading-loose py-[5px] px-3 me-4 my-[5px] text-[13px] font-normal text-surface cursor-pointer bg-zinc-50 dark:text-white dark:bg-neutral-700 rounded-2xl transition-[opacity] duration-300 ease-linear [word-wrap: break-word] shadow-none normal-case hover:!shadow-none inline-block font-medium leading-normal text-center no-underline align-middle cursor-pointer select-none border-[.125rem] border-solid border-transparent py-1.5 px-3 text-xs rounded	Sets styles for chips elements set by JavaScript.
`chipsInputWrapper`	relative flex items-center flex-wrap transition-all duration-300 ease-[cubic-bezier(0.25,0.1,0.25,1)]	Sets styles for chips input wrapper.
`chipsInput`	peer block min-h-[auto] w-[150px] rounded border-0 bg-transparent py-[0.32rem] px-3 leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-gray-200 dark:placeholder:text-gray-200 [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0	Styles for chips input element. Sets different appearance depending on input state.
`chipsLabel`	pointer-events-none absolute top-0 left-3 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-gray-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-gray-200 dark:peer-focus:text-gray-200	Sets styles for chips input label.

Methods

Method	Description	Example
`dispose`	Destroy chips	`myChips.dispose()`
`getInstance`	Static method which allows you to get the chips instance associated to a DOM element.	`ChipsInput.getInstance(myChips)`
`getOrCreateInstance`	Static method which returns the chips instance associated to a DOM element or create a new one in case it wasn't initialized.	`ChipsInput.getOrCreateInstance(myChips)`

javascript
umd

ES UMD

        
            
                const myChips = document.getElementById('myChipsID')
                const chips = new ChipsInput(myChips)
                chips.dispose()

        
            
                const myChips = document.getElementById('myChipsID')
                const chips = new twe.ChipsInput(myChips)
                chips.dispose()

Events

Event type	Description
`add.twe.chips`	This event fires start if you add chip to `data-twe-chips-placeholder` or `data-twe-chips-initial`
`arrowDown.twe.chips`	This event fires start if you click arrow down in the `data-twe-chips-placeholder` or `data-twe-chips-initial`
`arrowLeft.twe.chips`	This event fires start if you click arrow left in the `data-twe-chips-placeholder` or `data-twe-chips-initial`
`arrowRight.twe.chips`	This event fires start if you click arrow right in the `data-twe-chips-placeholder` or `data-twe-chips-initial`
`arrowUp.twe.chips`	This event fires start if you click arrow up in the `data-twe-chips-placeholder` or `data-twe-chips-initial`
`delete.twe.chips`	This event fires start if you click delete button/backspace in the `data-twe-chips-placeholder` or `data-twe-chips-initial`

JavaScript

        
            
              const myChips = document.getElementById('myChipsID');
              myChips.addEventListener('delete.twe.chips', () => {
                // do something...
              });

Chips

Basic example

Outline

Placeholder

Initial Value

Content editable

Chips - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events

Access restricted

To view this section you must have an active PRO account

Chips

Tailwind CSS Chips

Basic example

Outline

Placeholder

Initial Value

Content editable

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Chips - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events