N
eudash

Segmented

            
<!-- segmented radio  -->
<div class="btn-segmented inline-flex items-center rounded justify-start shadow-outset-fixed">
  <label for="check4" class="segmented-item rounded-l h-8 py-2 px-4 segmented-item btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-inset-hover active">
    <input id="check4" type="radio" name="radios" class="z-10 opacity-0 absolute inset-0" value="1" checked>
    <span>one</span>
  </label>

  <label for="check5" class="segmented-item rounded-l h-8 py-2 px-4 segmented-item btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-inset-hover">
    <input id="check5" type="radio" name="radios" class="z-10 opacity-0 absolute inset-0" value="2">
    <span>two</span>
  </label>

  <label for="check6" class="segmented-item rounded-l h-8 py-2 px-4 segmented-item btn-outline relative inline-flex flex-row items-center justify-center gap-x-2 text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-inset-hover">
    <input id="check6" type="radio" name="radios" class="z-10 opacity-0 absolute inset-0" value="3">
    <span>three</span>
  </label>
</div>

Chips

Chip 1
Chip 2
Chip 3
Chip 3 
            
<!-- chips -->
<div class="flex flex-wrap items-center gap-2">
  <div class="inline-flex flex-row items-center gap-2 h-8 py-1 px-3 text-sm shadow-inset bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 rounded-[30px] text-sm tracking-[.00714em] active">Chip 1<button class="cursor-pointer">x</button></div>

  <div class="inline-flex flex-row items-center gap-2 h-8 py-1 px-3 text-sm shadow-inset bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 rounded-[30px] text-sm tracking-[.00714em]">Chip 2<button class="cursor-pointer">x</button></div>
  <!-- with img -->
  <div class="inline-flex flex-row items-center gap-2 h-8 py-1 px-3 text-sm shadow-inset bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 rounded-[30px] text-sm tracking-[.00714em]"><div class="w-6 h-6 rounded-full bg-black overflow-hidden -ml-2">
    <img alt="Chip 3" src="src/img/avatars/avatar.jpg" class="w-6 h-6"></div>
    Chip 3
    <button class="cursor-pointer">x</button>
  </div>
</div>