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
- CSS
<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>
-->
.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
- CSS
<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>
-->
.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
- CSS
<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>
-->
.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
- CSS
<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>
-->
.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
- CSS
<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>
-->
.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
- CSS
<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>
-->
.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
- CSS
<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>
-->
.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
- CSS
<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>
-->
.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
- CSS
<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>
-->
.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
- CSS
<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>
-->
.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
- CSS
<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>
-->
.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
- CSS
<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>
-->
.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;
}