Chip

O elemento chip é utilizado para selecionar um ou vários itens em uma lista de opções disponíveis

Chip tamanho médio com badge e ícone

Preview

HTML

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1">
   <div class="chip__wrapper">
      <span class="chip__dot"></span>
      <label class="chip__label" for="chip1">Label</label>
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M5.99987 5.29312L8.47487 2.81812L9.18187 3.52512L6.70687 6.00012L9.18187 8.47512L8.47487 9.18212L5.99987 6.70711L3.52487 9.18212L2.81787 8.47512L5.29287 6.00012L2.81787 3.52512L3.52487 2.81812L5.99987 5.29312Z"
            fill="#A7A7A7" />
      </svg>
   </div>
</div>


<!-- Para desabilitar o chip aplique o atributo "disabled" na tag input "checkbox": 

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1" disabled>
   <div class="chip__wrapper">
      <span class="chip__dot"></span>
      <label class="chip__label" for="chip1">Label</label>
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M5.99987 5.29312L8.47487 2.81812L9.18187 3.52512L6.70687 6.00012L9.18187 8.47512L8.47487 9.18212L5.99987 6.70711L3.52487 9.18212L2.81787 8.47512L5.29287 6.00012L2.81787 3.52512L3.52487 2.81812L5.99987 5.29312Z"
            fill="#A7A7A7" />
      </svg>
   </div>
</div>

-->

CSS

.chip {
  position: relative;
}

.chip .chip__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: 40px;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  cursor: pointer;
  transition: all linear 150ms;
}

.chip .chip__wrapper .chip__dot {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background-color: #68CE8F;
}

.chip .chip__wrapper .chip__label {
  color: #434343;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
}

.chip .chip__wrapper svg {
  width: 16px;
  height: 16px;
  padding: 2px;
}

.chip .chip__wrapper svg path {
  transition: fill linear 150ms;
}

.chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.chip input[type="checkbox"]:hover~.chip__wrapper {
  background-color: #F5F5F5;
}

.chip input[type="checkbox"]:hover~.chip__wrapper .chip__label,
.chip input:checked[type="checkbox"]~.chip__wrapper .chip__label {
  color: #000;
}

.chip input[type="checkbox"]:hover~.chip__wrapper svg path {
  fill: #000;
}


.chip input:checked[type="checkbox"]~.chip__wrapper {
  background-color: #ffffff;
  border: 1.5px solid #01141E;
}

.chip input:disabled[type="checkbox"]{
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper .chip__label {
  color: #8E8E8E;
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper {
  cursor: not-allowed;
}

Chip tamanho médio sem badge e com ícone

Preview

HTML

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1">
   <div class="chip__wrapper">
      <label class="chip__label" for="chip1">Label</label>
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M5.99987 5.29312L8.47487 2.81812L9.18187 3.52512L6.70687 6.00012L9.18187 8.47512L8.47487 9.18212L5.99987 6.70711L3.52487 9.18212L2.81787 8.47512L5.29287 6.00012L2.81787 3.52512L3.52487 2.81812L5.99987 5.29312Z"
            fill="#A7A7A7" />
      </svg>
   </div>
</div>


<!-- Para desabilitar o chip aplique o atributo "disabled" na tag input "checkbox": 

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1" disabled>
   <div class="chip__wrapper">
      <label class="chip__label" for="chip1">Label</label>
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M5.99987 5.29312L8.47487 2.81812L9.18187 3.52512L6.70687 6.00012L9.18187 8.47512L8.47487 9.18212L5.99987 6.70711L3.52487 9.18212L2.81787 8.47512L5.29287 6.00012L2.81787 3.52512L3.52487 2.81812L5.99987 5.29312Z"
            fill="#A7A7A7" />
      </svg>
   </div>
</div>

-->

CSS

.chip {
  position: relative;
}

.chip .chip__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  gap: 8px;
  padding: 4px 8px 4px 12px;
  border-radius: 40px;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  cursor: pointer;
  transition: all linear 150ms;
}

.chip .chip__wrapper .chip__label {
  color: #434343;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
}

.chip .chip__wrapper svg {
  width: 16px;
  height: 16px;
  padding: 2px;
}

.chip .chip__wrapper svg path {
  transition: fill linear 150ms;
}

.chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.chip input[type="checkbox"]:hover~.chip__wrapper {
  background-color: #F5F5F5;
}

.chip input[type="checkbox"]:hover~.chip__wrapper .chip__label,
.chip input:checked[type="checkbox"]~.chip__wrapper .chip__label {
  color: #000;
}

.chip input[type="checkbox"]:hover~.chip__wrapper svg path {
  fill: #000;
}


.chip input:checked[type="checkbox"]~.chip__wrapper {
  background-color: #ffffff;
  border: 1.5px solid #01141E;
}

.chip input:disabled[type="checkbox"] {
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper .chip__label {
  color: #8E8E8E;
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper {
  cursor: not-allowed;
}

Chip tamanho médio com badge e sem ícone

Preview

HTML

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1">
   <label class="chip__wrapper" for="chip1">
      <span class="chip__dot"></span>
      <small class="chip__label">Label</small>
   </label>
</div>


<!-- Para desabilitar o chip aplique o atributo "disabled" na tag input "checkbox": 

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1" disabled>
   <label class="chip__wrapper" for="chip1">
      <span class="chip__dot"></span>
      <small class="chip__label">Label</small>
   </label>
</div>

-->

CSS

.chip {
  position: relative;
}

.chip .chip__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 40px;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  cursor: pointer;
  transition: all linear 150ms;
}

.chip .chip__wrapper .chip__dot {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background-color: #68CE8F;
}

.chip .chip__wrapper .chip__label {
  color: #434343;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
}

.chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.chip input[type="checkbox"]:hover~.chip__wrapper {
  background-color: #F5F5F5;
}

.chip input[type="checkbox"]:hover~.chip__wrapper .chip__label,
.chip input:checked[type="checkbox"]~.chip__wrapper .chip__label {
  color: #000;
}

.chip input:checked[type="checkbox"]~.chip__wrapper {
  background-color: #ffffff;
  border: 1.5px solid #01141E;
}

.chip input:disabled[type="checkbox"] {
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper .chip__label {
  color: #8E8E8E;
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper {
  cursor: not-allowed;
}

Chip tamanho médio sem badge e sem ícone

Preview

HTML

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1">
   <label class="chip__wrapper" for="chip1">
      <small class="chip__label">Label</small>
   </label>
</div>



<!-- Para desabilitar o chip aplique o atributo "disabled" na tag input "checkbox": 

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1" disabled>
   <label class="chip__wrapper" for="chip1">
      <small class="chip__label">Label</small>
   </label>
</div>

-->

CSS

.chip {
  position: relative;
}

.chip .chip__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  gap: 8px;
  padding: 4px 12px 4px 12px;
  border-radius: 40px;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  cursor: pointer;
  transition: all linear 150ms;
}

.chip .chip__wrapper .chip__label {
  color: #434343;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
}

.chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.chip input[type="checkbox"]:hover~.chip__wrapper {
  background-color: #F5F5F5;
}

.chip input[type="checkbox"]:hover~.chip__wrapper .chip__label,
.chip input:checked[type="checkbox"]~.chip__wrapper .chip__label {
  color: #000;
}


.chip input:checked[type="checkbox"]~.chip__wrapper {
  background-color: #ffffff;
  border: 1.5px solid #01141E;
}

.chip input:disabled[type="checkbox"] {
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper .chip__label {
  color: #8E8E8E;
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper {
  cursor: not-allowed;
}

Chip tamanho grande com badge e ícone

Preview

HTML

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1">
   <div class="chip__wrapper">
      <span class="chip__dot"></span>
      <label class="chip__label" for="chip1">Label</label>
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M5.99987 5.29312L8.47487 2.81812L9.18187 3.52512L6.70687 6.00012L9.18187 8.47512L8.47487 9.18212L5.99987 6.70711L3.52487 9.18212L2.81787 8.47512L5.29287 6.00012L2.81787 3.52512L3.52487 2.81812L5.99987 5.29312Z"
            fill="#A7A7A7" />
      </svg>
   </div>
</div>


<!-- Para desabilitar o chip aplique o atributo "disabled" na tag input "checkbox": 

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1" disabled>
   <div class="chip__wrapper">
      <span class="chip__dot"></span>
      <label class="chip__label" for="chip1">Label</label>
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M5.99987 5.29312L8.47487 2.81812L9.18187 3.52512L6.70687 6.00012L9.18187 8.47512L8.47487 9.18212L5.99987 6.70711L3.52487 9.18212L2.81787 8.47512L5.29287 6.00012L2.81787 3.52512L3.52487 2.81812L5.99987 5.29312Z"
            fill="#A7A7A7" />
      </svg>
   </div>
</div>

-->

CSS

.chip {
  position: relative;
}

.chip .chip__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  gap: 8px;
  padding: 8px;
  border-radius: 40px;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  cursor: pointer;
  transition: all linear 150ms;
}

.chip .chip__wrapper .chip__dot {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background-color: #68CE8F;
}

.chip .chip__wrapper .chip__label {
  color: #434343;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
}

.chip .chip__wrapper svg {
  width: 16px;
  height: 16px;
  padding: 2px;
}

.chip .chip__wrapper svg path {
  transition: fill linear 150ms;
}

.chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.chip input[type="checkbox"]:hover~.chip__wrapper {
  background-color: #F5F5F5;
}

.chip input[type="checkbox"]:hover~.chip__wrapper .chip__label,
.chip input:checked[type="checkbox"]~.chip__wrapper .chip__label {
  color: #000;
}

.chip input[type="checkbox"]:hover~.chip__wrapper svg path {
  fill: #000;
}


.chip input:checked[type="checkbox"]~.chip__wrapper {
  background-color: #ffffff;
  border: 1.5px solid #01141E;
}

.chip input:disabled[type="checkbox"] {
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper .chip__label {
  color: #8E8E8E;
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper {
  cursor: not-allowed;
}

Chip tamanho grande sem badge e com ícone

Preview

HTML

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1">
   <div class="chip__wrapper">
      <label class="chip__label" for="chip1">Label</label>
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M5.99987 5.29312L8.47487 2.81812L9.18187 3.52512L6.70687 6.00012L9.18187 8.47512L8.47487 9.18212L5.99987 6.70711L3.52487 9.18212L2.81787 8.47512L5.29287 6.00012L2.81787 3.52512L3.52487 2.81812L5.99987 5.29312Z"
            fill="#A7A7A7" />
      </svg>
   </div>
</div>


<!-- Para desabilitar o chip aplique o atributo "disabled" na tag input "checkbox": 

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1" disabled>
   <div class="chip__wrapper">
      <label class="chip__label" for="chip1">Label</label>
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M5.99987 5.29312L8.47487 2.81812L9.18187 3.52512L6.70687 6.00012L9.18187 8.47512L8.47487 9.18212L5.99987 6.70711L3.52487 9.18212L2.81787 8.47512L5.29287 6.00012L2.81787 3.52512L3.52487 2.81812L5.99987 5.29312Z"
            fill="#A7A7A7" />
      </svg>
   </div>
</div>

-->

CSS

.chip {
  position: relative;
}

.chip .chip__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border-radius: 40px;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  cursor: pointer;
  transition: all linear 150ms;
}

.chip .chip__wrapper .chip__label {
  color: #434343;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
}

.chip .chip__wrapper svg {
  width: 16px;
  height: 16px;
  padding: 2px;
}

.chip .chip__wrapper svg path {
  transition: fill linear 150ms;
}

.chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.chip input[type="checkbox"]:hover~.chip__wrapper {
  background-color: #F5F5F5;
}

.chip input[type="checkbox"]:hover~.chip__wrapper .chip__label,
.chip input:checked[type="checkbox"]~.chip__wrapper .chip__label {
  color: #000;
}

.chip input[type="checkbox"]:hover~.chip__wrapper svg path {
  fill: #000;
}


.chip input:checked[type="checkbox"]~.chip__wrapper {
  background-color: #ffffff;
  border: 1.5px solid #01141E;
}

.chip input:disabled[type="checkbox"] {
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper .chip__label {
  color: #8E8E8E;
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper {
  cursor: not-allowed;
}

Chip tamanho grande com badge e sem ícone

Preview

HTML

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1">
   <label class="chip__wrapper" for="chip1">
      <span class="chip__dot"></span>
      <small class="chip__label">Label</small>
   </label>
</div>


<!-- Para desabilitar o chip aplique o atributo "disabled" na tag input "checkbox": 

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1" disabled>
   <label class="chip__wrapper" for="chip1">
      <span class="chip__dot"></span>
      <small class="chip__label">Label</small>
   </label>
</div>

-->

CSS

.chip {
  position: relative;
}

.chip .chip__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  gap: 8px;
  padding: 8px 12px 8px 8px;
  border-radius: 40px;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  cursor: pointer;
  transition: all linear 150ms;
}

.chip .chip__wrapper .chip__dot {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  background-color: #68CE8F;
}

.chip .chip__wrapper .chip__label {
  color: #434343;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
}

.chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.chip input[type="checkbox"]:hover~.chip__wrapper {
  background-color: #F5F5F5;
}

.chip input[type="checkbox"]:hover~.chip__wrapper .chip__label,
.chip input:checked[type="checkbox"]~.chip__wrapper .chip__label {
  color: #000;
}

.chip input:checked[type="checkbox"]~.chip__wrapper {
  background-color: #ffffff;
  border: 1.5px solid #01141E;
}

.chip input:disabled[type="checkbox"] {
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper .chip__label {
  color: #8E8E8E;
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper {
  cursor: not-allowed;
}

Chip tamanho grande sem badge e sem ícone

Preview

HTML

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1">
   <label class="chip__wrapper" for="chip1">
      <small class="chip__label">Label</small>
   </label>
</div>



<!-- Para desabilitar o chip aplique o atributo "disabled" na tag input "checkbox": 

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1" disabled>
   <label class="chip__wrapper" for="chip1">
      <small class="chip__label">Label</small>
   </label>
</div>

-->

CSS

.chip {
  position: relative;
}

.chip .chip__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  gap: 8px;
  padding: 8px 12px 8px 12px;
  border-radius: 40px;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  cursor: pointer;
  transition: all linear 150ms;
}

.chip .chip__wrapper .chip__label {
  color: #434343;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
}

.chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.chip input[type="checkbox"]:hover~.chip__wrapper {
  background-color: #F5F5F5;
}

.chip input[type="checkbox"]:hover~.chip__wrapper .chip__label,
.chip input:checked[type="checkbox"]~.chip__wrapper .chip__label {
  color: #000;
}


.chip input:checked[type="checkbox"]~.chip__wrapper {
  background-color: #ffffff;
  border: 1.5px solid #01141E;
}

.chip input:disabled[type="checkbox"] {
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper .chip__label {
  color: #8E8E8E;
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper {
  cursor: not-allowed;
}

Chip tamanho pequeno com badge e ícone

Preview

HTML

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1">
   <div class="chip__wrapper">
      <span class="chip__dot"></span>
      <label class="chip__label" for="chip1">Label</label>
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M5.99987 5.29312L8.47487 2.81812L9.18187 3.52512L6.70687 6.00012L9.18187 8.47512L8.47487 9.18212L5.99987 6.70711L3.52487 9.18212L2.81787 8.47512L5.29287 6.00012L2.81787 3.52512L3.52487 2.81812L5.99987 5.29312Z"
            fill="#A7A7A7" />
      </svg>
   </div>
</div>


<!-- Para desabilitar o chip aplique o atributo "disabled" na tag input "checkbox": 

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1" disabled>
   <div class="chip__wrapper">
      <span class="chip__dot"></span>
      <label class="chip__label" for="chip1">Label</label>
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M5.99987 5.29312L8.47487 2.81812L9.18187 3.52512L6.70687 6.00012L9.18187 8.47512L8.47487 9.18212L5.99987 6.70711L3.52487 9.18212L2.81787 8.47512L5.29287 6.00012L2.81787 3.52512L3.52487 2.81812L5.99987 5.29312Z"
            fill="#A7A7A7" />
      </svg>
   </div>
</div>

-->

CSS

.chip {
  position: relative;
}

.chip .chip__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  gap: 8px;
  padding: 2px 4px 2px 2px;
  border-radius: 40px;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  cursor: pointer;
  transition: all linear 150ms;
}

.chip .chip__wrapper .chip__dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: #68CE8F;
}

.chip .chip__wrapper .chip__label {
  color: #434343;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
}

.chip .chip__wrapper svg {
  width: 16px;
  height: 16px;
  padding: 2px;
}

.chip .chip__wrapper svg path {
  transition: fill linear 150ms;
}

.chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.chip input[type="checkbox"]:hover~.chip__wrapper {
  background-color: #F5F5F5;
}

.chip input[type="checkbox"]:hover~.chip__wrapper .chip__label,
.chip input:checked[type="checkbox"]~.chip__wrapper .chip__label {
  color: #000;
}

.chip input[type="checkbox"]:hover~.chip__wrapper svg path {
  fill: #000;
}


.chip input:checked[type="checkbox"]~.chip__wrapper {
  background-color: #ffffff;
  border: 1.5px solid #01141E;
}

.chip input:disabled[type="checkbox"] {
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper .chip__label {
  color: #8E8E8E;
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper {
  cursor: not-allowed;
}

Chip tamanho pequeno sem badge e com ícone

Preview

HTML

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1">
   <div class="chip__wrapper">
      <label class="chip__label" for="chip1">Label</label>
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M5.99987 5.29312L8.47487 2.81812L9.18187 3.52512L6.70687 6.00012L9.18187 8.47512L8.47487 9.18212L5.99987 6.70711L3.52487 9.18212L2.81787 8.47512L5.29287 6.00012L2.81787 3.52512L3.52487 2.81812L5.99987 5.29312Z"
            fill="#A7A7A7" />
      </svg>
   </div>
</div>


<!-- Para desabilitar o chip aplique o atributo "disabled" na tag input "checkbox": 

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1" disabled>
   <div class="chip__wrapper">
      <label class="chip__label" for="chip1">Label</label>
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
         <path d="M5.99987 5.29312L8.47487 2.81812L9.18187 3.52512L6.70687 6.00012L9.18187 8.47512L8.47487 9.18212L5.99987 6.70711L3.52487 9.18212L2.81787 8.47512L5.29287 6.00012L2.81787 3.52512L3.52487 2.81812L5.99987 5.29312Z"
            fill="#A7A7A7" />
      </svg>
   </div>
</div>

-->

CSS

.chip {
  position: relative;
}

.chip .chip__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  gap: 8px;
  padding: 2px 4px 2px 8px;
  border-radius: 40px;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  cursor: pointer;
  transition: all linear 150ms;
}

.chip .chip__wrapper .chip__label {
  color: #434343;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
}

.chip .chip__wrapper svg {
  width: 16px;
  height: 16px;
  padding: 2px;
}

.chip .chip__wrapper svg path {
  transition: fill linear 150ms;
}

.chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.chip input[type="checkbox"]:hover~.chip__wrapper {
  background-color: #F5F5F5;
}

.chip input[type="checkbox"]:hover~.chip__wrapper .chip__label,
.chip input:checked[type="checkbox"]~.chip__wrapper .chip__label {
  color: #000;
}

.chip input[type="checkbox"]:hover~.chip__wrapper svg path {
  fill: #000;
}


.chip input:checked[type="checkbox"]~.chip__wrapper {
  background-color: #ffffff;
  border: 1.5px solid #01141E;
}

.chip input:disabled[type="checkbox"] {
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper .chip__label {
  color: #8E8E8E;
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper {
  cursor: not-allowed;
}

Chip tamanho pequeno com badge e sem ícone

Preview

HTML

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1">
   <label class="chip__wrapper" for="chip1">
      <span class="chip__dot"></span>
      <small class="chip__label">Label</small>
   </label>
</div>


<!-- Para desabilitar o chip aplique o atributo "disabled" na tag input "checkbox": 

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1" disabled>
   <label class="chip__wrapper" for="chip1">
      <span class="chip__dot"></span>
      <small class="chip__label">Label</small>
   </label>
</div>

-->

CSS

.chip {
  position: relative;
}

.chip .chip__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  gap: 8px;
  padding: 2px 12px 2px 2px;
  border-radius: 40px;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  cursor: pointer;
  transition: all linear 150ms;
}

.chip .chip__wrapper .chip__dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: #68CE8F;
}

.chip .chip__wrapper .chip__label {
  color: #434343;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
}

.chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.chip input[type="checkbox"]:hover~.chip__wrapper {
  background-color: #F5F5F5;
}

.chip input[type="checkbox"]:hover~.chip__wrapper .chip__label,
.chip input:checked[type="checkbox"]~.chip__wrapper .chip__label {
  color: #000;
}

.chip input:checked[type="checkbox"]~.chip__wrapper {
  background-color: #ffffff;
  border: 1.5px solid #01141E;
}

.chip input:disabled[type="checkbox"] {
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper .chip__label {
  color: #8E8E8E;
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper {
  cursor: not-allowed;
}

Chip tamanho pequeno sem badge e sem ícone

Preview

HTML

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1">
   <label class="chip__wrapper" for="chip1">
      <small class="chip__label">Label</small>
   </label>
</div>



<!-- Para desabilitar o chip aplique o atributo "disabled" na tag input "checkbox": 

<div class="chip">
   <input type="checkbox" name="chip1" id="chip1" disabled>
   <label class="chip__wrapper" for="chip1">
      <small class="chip__label">Label</small>
   </label>
</div>

-->

CSS

.chip {
  position: relative;
}

.chip .chip__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  gap: 8px;
  padding: 2px 12px 2px 12px;
  border-radius: 40px;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  cursor: pointer;
  transition: all linear 150ms;
}

.chip .chip__wrapper .chip__label {
  color: #434343;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
}

.chip input[type="checkbox"] {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.chip input[type="checkbox"]:hover~.chip__wrapper {
  background-color: #F5F5F5;
}

.chip input[type="checkbox"]:hover~.chip__wrapper .chip__label,
.chip input:checked[type="checkbox"]~.chip__wrapper .chip__label {
  color: #000;
}


.chip input:checked[type="checkbox"]~.chip__wrapper {
  background-color: #ffffff;
  border: 1.5px solid #01141E;
}

.chip input:disabled[type="checkbox"] {
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper .chip__label {
  color: #8E8E8E;
  pointer-events: none;
}

.chip input:disabled[type="checkbox"]~.chip__wrapper {
  cursor: not-allowed;
}