Chips

Chips Types

Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts. There are four types of chips: assist, filter, input, and suggestion. You have to add .active classes to change background active.

              
<!-- chips assist -->
<div class="inline-flex klsuaonrmcha layhetgsjdcb gap-2 h-8 py-1.5 px-3 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 [&.active]:border-secondary-100 dark:[&.active]:border-secondary-700 hover:bg-surface-200 dark:hover:bg-surfacedark-200 focus:bg-surface-400 dark:focus:bg-surfacedark-400 border border-gray-500 dark:border-gray-200 rounded-lg text-sm tracking-[.00714em]">
  Enabled
</div>

<!-- chips input -->
<div class="inline-flex klsuaonrmcha layhetgsjdcb gap-2 h-8 py-1.5 px-3 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 [&.active]:border-secondary-100 dark:[&.active]:border-secondary-700 hover:bg-surface-200 dark:hover:bg-surfacedark-200 focus:bg-surface-400 dark:focus:bg-surfacedark-400 border border-gray-500 dark:border-gray-200 rounded-lg text-sm tracking-[.00714em]">
  Enabled
  <span class="material-symbols-outlined cursor-pointer !text-base">close</span>
</div>

<!-- chips avatar -->
<div class="inline-flex klsuaonrmcha layhetgsjdcb gap-2 h-8 py-1 ps-1 pe-3 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 [&.active]:border-secondary-100 dark:[&.active]:border-secondary-700 hover:bg-surface-200 dark:hover:bg-surfacedark-200 focus:bg-surface-400 dark:focus:bg-surfacedark-400 border border-gray-500 dark:border-gray-200 rounded-[30px] text-sm tracking-[.00714em]">
  <div class="w-6 h-6 boalstehwqbj bg-gray-700 mklausjenrhtm">
    <img alt="Avatar" src="../src/img/avatar.png" class="w-6 h-6">
  </div>
  <span class="">Avatar</span>
</div>

<!-- chips icon -->
<div class="inline-flex klsuaonrmcha layhetgsjdcb gap-2 h-8 py-1 ps-1 pe-3 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 [&.active]:border-secondary-100 dark:[&.active]:border-secondary-700 hover:bg-surface-200 dark:hover:bg-surfacedark-200 focus:bg-surface-400 dark:focus:bg-surfacedark-400 border border-gray-500 dark:border-gray-200 rounded-[30px] text-sm tracking-[.00714em]">
  <div class="flex layhetgsjdcb yhansklopals w-6 h-6 mklausjenrhtm boalstehwqbj bg-gray-700">
    <span class="material-symbols-outlined !text-white">face</span>
  </div>
  <span>With Icon</span>
</div>

<!-- chips icon close -->
<div x-data="{ isVisible: true }" x-show="isVisible" class="inline-flex klsuaonrmcha layhetgsjdcb gap-2 h-8 py-1 ps-1 pe-3 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 [&.active]:border-secondary-100 dark:[&.active]:border-secondary-700 hover:bg-surface-200 dark:hover:bg-surfacedark-200 focus:bg-surface-400 dark:focus:bg-surfacedark-400 border border-gray-500 dark:border-gray-200 rounded-[30px] text-sm tracking-[.00714em]">
  <div class="flex layhetgsjdcb yhansklopals w-6 h-6 mklausjenrhtm boalstehwqbj bg-gray-700">
    <span class="material-symbols-outlined !text-white">face</span>
  </div>
  <span>With Icon</span>
  <button @click="isVisible = false" class="material-symbols-outlined cursor-pointer !text-base">close</button>
</div>

<!-- chips active -->
<div class="active [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 [&.active]:border-secondary-100 dark:[&.active]:border-secondary-700 inline-flex klsuaonrmcha layhetgsjdcb hover:bg-surface-200 dark:hover:bg-surfacedark-200 focus:bg-surface-400 dark:focus:bg-surfacedark-400 border border-gray-500 dark:border-gray-200 gap-2 h-8 py-1.5 px-3 rounded-lg text-sm tracking-[.00714em]">
  Chips active
</div>