# Chips

Chips help people enter information, make selections, filter content, or trigger actions.

Enabled
Enabled close
Avatar
face
With Icon
face
With Icon close
Enabled
Enabled close
Avatar
face
With Icon
face
With Icon close

## 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 flex-row items-center 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 flex-row items-center 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 flex-row items-center gap-2 h-8 py-1 pl-1 pr-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 rounded-full bg-gray-700 overflow-hidden">
        <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 flex-row items-center gap-2 h-8 py-1 pl-1 pr-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 items-center justify-center w-6 h-6 overflow-hidden rounded-full bg-gray-700">
        <span class="material-symbols-outlined !text-white">face</span>
      </div>
      <span>With Icon</span>
    </div>

    <!-- chips icon close -->
    <div class="inline-flex flex-row items-center gap-2 h-8 py-1 pl-1 pr-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 items-center justify-center w-6 h-6 overflow-hidden rounded-full bg-gray-700">
        <span class="material-symbols-outlined !text-white">face</span>
      </div>
      <span>With Icon</span>
      <span class="material-symbols-outlined cursor-pointer !text-base">close</span>
    </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 flex-row items-center 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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts