Chip - JS + CSS

Chip

Struktur HTML


<div class="ina-chip">
  <div class="ina-chip__list">
    <button
      type="button"
      class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled ina-chip__item--selected"
    >
      Option 1
    </button>
    <button
      type="button"
      class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
    >
      Option 2
    </button>
  </div>
</div>

Contoh Penggunaan

Contoh 1

Pilih Tema

Single Selection - Filled

Selected value from Chip is : -

Single Selection - Outline

Selected value from Chip is : -

Multiple Selection

Selected values from Chip are : -

<div style="padding: 20px; display: flex; flex-direction: column; gap: 24px">
  <!-- Brand Selector -->
  <BrandSelector />

  <div id="chip-filled" class="ina-chip">
    <p style="margin-bottom: 8px; font-size: 14px; font-weight: 500;">Single Selection - Filled</p>
    <div class="ina-chip__list">
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline ina-chip__item--selected"
        data-value="option1"
      >
        Option 1
      </button>
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="option2"
      >
        Option 2
      </button>
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="option3"
      >
      </button>
    </div>
    <div style="margin-top: 8px; font-size: 12px; color: #1d4ed8;">
      Selected value from Chip is : <code id="chip-filled-preview">-</code>
    </div>
  </div>

  <div id="chip-outline" class="ina-chip">
    <p style="margin-bottom: 8px; font-size: 14px; font-weight: 500;">Single Selection - Outline</p>
    <div class="ina-chip__list">
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="option1"
      >
        Option 1
      </button>
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline ina-chip__item--selected"
        data-value="option2"
      >
        Option 2
      </button>
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="option3"
      >
        Option 3
      </button>
    </div>
    <div style="margin-top: 8px; font-size: 12px; color: #1d4ed8;">
      Selected value from Chip is : <code id="chip-outline-preview">-</code>
    </div>
  </div>

  <div id="chip-multiple" class="ina-chip" data-multiple="true">
    <p style="margin-bottom: 8px; font-size: 14px; font-weight: 500;">Multiple Selection</p>
    <div class="ina-chip__list">
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="soccer">Soccer</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="basketball">Basketball</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="tennis">Tennis</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="volleyball"
        disabled>Volleyball</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="badminton">Badminton</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="table-tennis">Table Tennis</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="swimming">Swimming</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="running">Running</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="cycling">Cycling</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="hiking">Hiking</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="yoga">Yoga</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="pilates">Pilates</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="zumba">Zumba</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="aerobics">Aerobics</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="dancing">Dancing</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="martial-arts">Martial Arts</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="boxing">Boxing</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="karate">Karate</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="judo">Judo</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="taekwondo">Taekwondo</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="fencing">Fencing</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="archery">Archery</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-outline"
        data-value="shooting">Shooting</button
      >
    </div>
    <div style="margin-top: 8px; font-size: 12px; color: #1d4ed8;">
      Selected values from Chip are : <code id="chip-multiple-preview">-</code>
    </div>
  </div>
</div>

<script>
  const chipFilled = document.querySelector('#chip-filled');
  const chipFilledPreview = document.querySelector('#chip-filled-preview');
  chipFilled?.addEventListener('chip:change', (e: Event) => {
    const event = e as CustomEvent;
    if (chipFilledPreview) chipFilledPreview.textContent = event.detail.value;
  });

  const chipOutline = document.querySelector('#chip-outline');
  const chipOutlinePreview = document.querySelector('#chip-outline-preview');
  chipOutline?.addEventListener('chip:change', (e: Event) => {
    const event = e as CustomEvent;
    if (chipOutlinePreview) chipOutlinePreview.textContent = event.detail.value;
  });

  const chipMultiple = document.querySelector('#chip-multiple');
  const chipMultiplePreview = document.querySelector('#chip-multiple-preview');
  chipMultiple?.addEventListener('chip:change', (e: Event) => {
    const event = e as CustomEvent;
    const vals = event.detail.value;
    if (chipMultiplePreview) {
      chipMultiplePreview.textContent = vals.length ? vals.join(', ') : '-';
    }
  });
</script>

Contoh 2 - Custom Option Enabled

Single Selection with Customization

Multiple Selection with Customization

Selected values from Chip are : -

<div style="padding: 20px; display: flex; flex-direction: column; gap: 24px">
  <div class="ina-chip" id="chip-custom-container">
    <p style="margin-bottom: 8px; font-size: 14px; font-weight: 500;">
      Single Selection with Customization
    </p>
    <div class="ina-chip__list">
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled ina-chip__item--selected"
        data-value="7"
      >
        7 Hari
      </button>
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="30"
      >
        30 Hari
      </button>
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="90"
      >
        90 Hari
      </button>
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="custom"
        id="chip-custom-button"
      >
        Custom
      </button>
    </div>

    <div class="ina-chip__custom-field" id="chip-custom-field" style="display: none">
      <div class="ina-text-field" style="max-width: 50%">
        <div class="ina-text-field__wrapper ina-text-field__wrapper--size-md">
          <input
            type="text"
            class="ina-text-field__input"
            id="chip-custom-input"
            placeholder="Masukkan data yang Anda inginkan"
          />
        </div>
      </div>
    </div>
  </div>

  <div class="ina-chip" id="chip-custom-multiple-container" data-multiple="true">
    <p style="margin-bottom: 8px; font-size: 14px; font-weight: 500;">
      Multiple Selection with Customization
    </p>
    <div class="ina-chip__list">
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="soccer">Soccer</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="basketball">Basketball</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="tennis">Tennis</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="volleyball"
        disabled>Volleyball</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="badminton">Badminton</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="table-tennis">Table Tennis</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="swimming">Swimming</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="running">Running</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="cycling">Cycling</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="hiking">Hiking</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="yoga">Yoga</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="pilates">Pilates</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="zumba">Zumba</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="aerobics">Aerobics</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="dancing">Dancing</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="martial-arts">Martial Arts</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="boxing">Boxing</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="karate">Karate</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="judo">Judo</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="taekwondo">Taekwondo</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="fencing">Fencing</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="archery">Archery</button
      >
      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="shooting">Shooting</button
      >

      <button
        type="button"
        class="ina-chip__item ina-chip__item--size-medium ina-chip__item--variant-filled"
        data-value="custom"
        id="chip-custom-multiple-button"
      >
        Custom
      </button>
    </div>

    <div class="ina-chip__custom-field" id="chip-custom-multiple-field" style="display: none">
      <div class="ina-text-field" style="max-width: 50%">
        <div class="ina-text-field__wrapper ina-text-field__wrapper--size-md">
          <input
            type="text"
            class="ina-text-field__input"
            id="chip-custom-multiple-input"
            placeholder="Masukkan data yang Anda inginkan"
          />
        </div>
      </div>
    </div>
    <div style="margin-top: 8px; font-size: 12px; color: #1d4ed8;">
      Selected values from Chip are : <code id="chip-custom-multiple-preview">-</code>
    </div>
  </div>
</div>

<script>
  const customChip = document.getElementById('chip-custom-container');
  const customField = document.getElementById('chip-custom-field');
  const customInput = document.getElementById('chip-custom-input');

  customChip?.addEventListener('chip:change', (e: Event) => {
    const event = e as CustomEvent;
    const selectedValue = event.detail.value;
    if (selectedValue === 'custom') {
      if (!customField) return;

      customField.style.display = 'block';
      setTimeout(() => {
        customInput?.focus();
      }, 0);
    } else {
      if (!customField) return;

      customField.style.display = 'none';
    }
  });

  const customMultipleChip = document.getElementById('chip-custom-multiple-container');
  const customMultipleField = document.getElementById('chip-custom-multiple-field');
  const customMultipleInput = document.getElementById('chip-custom-multiple-input');
  const customMultiplePreview = document.getElementById('chip-custom-multiple-preview');

  customMultipleChip?.addEventListener('chip:change', (e: Event) => {
    const event = e as CustomEvent;
    // Array in multiple mode
    const selectedValues = event.detail.value;

    // Check if the current visible state of the custom button is selected
    // Note: since the library handles the selected state based on customValues parsing,
    // we can also visually check if the toggle button is active, or we check if 'custom' is in array.
    // Given the component design, 'custom' text might be replaced by the typed value.
    if (
      selectedValues.length &&
      document
        .getElementById('chip-custom-multiple-button')
        ?.classList.contains('ina-chip__item--selected')
    ) {
      if (customMultipleField) {
        customMultipleField.style.display = 'block';
      }
    } else {
      if (customMultipleField) {
        customMultipleField.style.display = 'none';
      }
    }

    if (customMultiplePreview) {
      customMultiplePreview.textContent = selectedValues.length ? selectedValues.join(', ') : '-';
    }
  });

  document.getElementById('chip-custom-multiple-button')?.addEventListener('click', () => {
    if (customMultipleField) {
      customMultipleField.style.display = 'block';
      setTimeout(() => {
        customMultipleInput?.focus();
      }, 0);
    }
  });
</script>