Switch (Toggle)
Toggle
- Preview
- HTML
- CSS
<div class="toggle">
<input type="checkbox" id="check">
<label class="toggle__trail" for="check">
<span class="toggle__handler"></span>
</label>
</div>
<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>:
<div class="toggle">
<input type="checkbox" id="check" disabled>
<label class="toggle__trail" for="check">
<span class="toggle__handler"></span>
</label>
</div>
-->
<!-- Para marcar e desabilitar o input adicione os atributos 'disabled' e 'checked' na tag <input>:
<div class="toggle">
<input type="checkbox" id="check" disabled checked>
<label class="toggle__trail" for="check">
<span class="toggle__handler"></span>
</label>
</div>
-->
.toggle {
display: flex;
width: 52px;
height: 32px;
position: relative;
}
.toggle input[type=checkbox] {
position: absolute;
opacity: 0;
z-index: -1;
inset: 0;
}
.toggle input[type=checkbox]:checked+.toggle__trail {
background-color: #68CE8F;
}
.toggle:hover input[type=checkbox]:checked + .toggle__trail {
background-color: #28B95E;
}
.toggle input[type=checkbox]:checked+.toggle__trail .toggle__handler {
margin-left: 45%;
background-color: #fff;
}
.toggle .toggle__trail {
width: inherit;
height: inherit;
padding: 4px;
background-color: #E6E6E6;
border-radius: 999px;
transition: all 0.3s linear;
cursor: pointer;
}
.toggle .toggle__trail:hover{
background-color: #A7A7A7;
}
.toggle__trail .toggle__handler {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
min-width: 24px;
height: 24px;
min-height: 24px;
position: relative;
background-color: #fff;
border-radius: 100%;
transition: all 0.3s linear;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.toggle input[type=checkbox]:disabled + .toggle__trail{
background-color: #F5F5F5;
cursor: not-allowed;
}
.toggle input[type=checkbox]:disabled:checked + .toggle__trail {
background-color: #D4F1DF;
}
Toggle pequeno
- Preview
- HTML
- CSS
<div class="toggle">
<input type="checkbox" id="check">
<label class="toggle__trail" for="check">
<span class="toggle__handler"></span>
</label>
</div>
<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>:
<div class="toggle">
<input type="checkbox" id="check" disabled>
<label class="toggle__trail" for="check">
<span class="toggle__handler"></span>
</label>
</div>
-->
<!-- Para marcar e desabilitar o input adicione os atributos 'disabled' e 'checked' na tag <input>:
<div class="toggle">
<input type="checkbox" id="check" disabled checked>
<label class="toggle__trail" for="check">
<span class="toggle__handler"></span>
</label>
</div>
-->
.toggle {
display: flex;
width: 32px;
height: 20px;
position: relative;
}
.toggle input[type=checkbox] {
position: absolute;
opacity: 0;
z-index: -1;
inset: 0;
}
.toggle input[type=checkbox]:checked+.toggle__trail {
background-color: #68CE8F;
}
.toggle:hover input[type=checkbox]:checked + .toggle__trail {
background-color: #28B95E;
}
.toggle input[type=checkbox]:checked+.toggle__trail .toggle__handler {
margin-left: 45%;
background-color: #fff;
}
.toggle .toggle__trail {
width: inherit;
height: inherit;
padding: 2px;
background-color: #E6E6E6;
border-radius: 999px;
transition: all 0.3s linear;
cursor: pointer;
}
.toggle .toggle__trail:hover{
background-color: #A7A7A7;
}
.toggle__trail .toggle__handler {
display: flex;
justify-content: center;
align-items: center;
width: 16px;
min-width: 16px;
height: 16px;
min-height: 16px;
position: relative;
background-color: #fff;
border-radius: 100%;
transition: all 0.3s linear;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.toggle input[type=checkbox]:disabled + .toggle__trail{
background-color: #F5F5F5;
cursor: not-allowed;
}
.toggle input[type=checkbox]:disabled:checked + .toggle__trail {
background-color: #D4F1DF;
}
Toggle com ícone
- Preview
- HTML
- CSS
<div class="toggle">
<input type="checkbox" id="check">
<label class="toggle__trail" for="check">
<span class="toggle__handler">
<svg class="toggle__off" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M7.99982 7.05774L11.2998 3.75774L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998
12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716
8.0004L3.75716 4.7004L4.69982 3.75774L7.99982 7.05774Z" fill="#A7A7A7" />
</svg>
<svg class="toggle__on" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M6.66649 10.1149L12.7945 3.98625L13.7378 4.92892L6.66649 12.0003L2.42383
7.75759L3.36649 6.81492L6.66649 10.1149Z" fill="#68CE8F" />
</svg>
</span>
</label>
</div>
<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>:
<div class="toggle">
<input type="checkbox" id="check3" disabled>
<label class="toggle__trail" for="check3">
<span class="toggle__handler">
<svg class="toggle__off" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M7.99982 7.05774L11.2998 3.75774L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998
12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716
8.0004L3.75716 4.7004L4.69982 3.75774L7.99982 7.05774Z" fill="#A7A7A7" />
</svg>
<svg class="toggle__on" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M6.66649 10.1149L12.7945 3.98625L13.7378 4.92892L6.66649 12.0003L2.42383
7.75759L3.36649 6.81492L6.66649 10.1149Z" fill="#68CE8F" />
</svg>
</span>
</label>
</div>
-->
<!-- Para marcar e desabilitar o input adicione os atributos 'disabled' e 'checked' na tag <input>:
<div class="toggle">
<input type="checkbox" id="check3" disabled checked>
<label class="toggle__trail" for="check3">
<span class="toggle__handler">
<svg class="toggle__off" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M7.99982 7.05774L11.2998 3.75774L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998
12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716
8.0004L3.75716 4.7004L4.69982 3.75774L7.99982 7.05774Z" fill="#A7A7A7" />
</svg>
<svg class="toggle__on" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M6.66649 10.1149L12.7945 3.98625L13.7378 4.92892L6.66649 12.0003L2.42383
7.75759L3.36649 6.81492L6.66649 10.1149Z" fill="#68CE8F" />
</svg>
</span>
</label>
</div>
-->
.toggle {
display: flex;
width: 52px;
height: 32px;
position: relative;
}
.toggle input[type=checkbox] {
position: absolute;
opacity: 0;
z-index: -1;
inset: 0;
}
.toggle input[type=checkbox]:checked+.toggle__trail {
background-color: #68CE8F;
}
.toggle:hover input[type=checkbox]:checked + .toggle__trail {
background-color: #28B95E;
}
.toggle input[type=checkbox]:checked+.toggle__trail .toggle__handler {
margin-left: 45%;
background-color: #fff;
}
.toggle .toggle__trail {
width: inherit;
height: inherit;
padding: 4px;
background-color: #E6E6E6;
border-radius: 999px;
transition: all 0.3s linear;
cursor: pointer;
}
.toggle .toggle__trail:hover{
background-color: #A7A7A7;
}
.toggle__trail .toggle__handler {
display: flex;
justify-content: center;
align-items: center;
width: 24px;
min-width: 24px;
height: 24px;
min-height: 24px;
position: relative;
background-color: #fff;
border-radius: 100%;
transition: all 0.3s linear;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.toggle__handler .toggle__off,
input[type=checkbox]:checked+.toggle__trail .toggle__on {
display: block;
}
.toggle__handler .toggle__on,
input[type=checkbox]:checked+.toggle__trail .toggle__off {
display: none;
}
.toggle input[type=checkbox]:disabled + .toggle__trail{
background-color: #F5F5F5;
cursor: not-allowed;
}
.toggle input[type=checkbox]:disabled + .toggle__trail .toggle__off path {
fill: #E6E6E6;
}
.toggle input[type=checkbox]:disabled:checked + .toggle__trail {
background-color: #D4F1DF;
}
.toggle input[type=checkbox]:disabled:checked + .toggle__trail .toggle__on path{
fill: #D4F1DF;
}
Toggle pequeno com ícone
- Preview
- HTML
- CSS
<div class="toggle">
<input type="checkbox" id="check">
<label class="toggle__trail" for="check">
<span class="toggle__handler">
<svg class="toggle__off" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M7.99982 7.05774L11.2998 3.75774L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998
12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716
8.0004L3.75716 4.7004L4.69982 3.75774L7.99982 7.05774Z" fill="#A7A7A7" />
</svg>
<svg class="toggle__on" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M6.66649 10.1149L12.7945 3.98625L13.7378 4.92892L6.66649 12.0003L2.42383
7.75759L3.36649 6.81492L6.66649 10.1149Z" fill="#68CE8F" />
</svg>
</span>
</label>
</div>
<!-- Para desabilitar o input adicione o atributo 'disabled' na tag <input>:
<div class="toggle">
<input type="checkbox" id="check3" disabled>
<label class="toggle__trail" for="check3">
<span class="toggle__handler">
<svg class="toggle__off" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M7.99982 7.05774L11.2998 3.75774L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998
12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716
8.0004L3.75716 4.7004L4.69982 3.75774L7.99982 7.05774Z" fill="#A7A7A7" />
</svg>
<svg class="toggle__on" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M6.66649 10.1149L12.7945 3.98625L13.7378 4.92892L6.66649 12.0003L2.42383
7.75759L3.36649 6.81492L6.66649 10.1149Z" fill="#68CE8F" />
</svg>
</span>
</label>
</div>
-->
<!-- Para marcar e desabilitar o input adicione os atributos 'disabled' e 'checked' na tag <input>:
<div class="toggle">
<input type="checkbox" id="check3" disabled checked>
<label class="toggle__trail" for="check3">
<span class="toggle__handler">
<svg class="toggle__off" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M7.99982 7.05774L11.2998 3.75774L12.2425 4.7004L8.94249 8.0004L12.2425 11.3004L11.2998
12.2431L7.99982 8.94307L4.69982 12.2431L3.75716 11.3004L7.05716
8.0004L3.75716 4.7004L4.69982 3.75774L7.99982 7.05774Z" fill="#A7A7A7" />
</svg>
<svg class="toggle__on" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M6.66649 10.1149L12.7945 3.98625L13.7378 4.92892L6.66649 12.0003L2.42383
7.75759L3.36649 6.81492L6.66649 10.1149Z" fill="#68CE8F" />
</svg>
</span>
</label>
</div>
-->
.toggle {
display: flex;
width: 32px;
height: 20px;
position: relative;
}
.toggle input[type=checkbox] {
position: absolute;
opacity: 0;
z-index: -1;
inset: 0;
}
.toggle input[type=checkbox]:checked+.toggle__trail {
background-color: #68CE8F;
}
.toggle:hover input[type=checkbox]:checked + .toggle__trail {
background-color: #28B95E;
}
.toggle input[type=checkbox]:checked+.toggle__trail .toggle__handler {
margin-left: 45%;
background-color: #fff;
}
.toggle .toggle__trail {
width: inherit;
height: inherit;
padding: 2px;
background-color: #E6E6E6;
border-radius: 999px;
transition: all 0.3s linear;
cursor: pointer;
}
.toggle .toggle__trail:hover{
background-color: #A7A7A7;
}
.toggle__trail .toggle__handler {
display: flex;
justify-content: center;
align-items: center;
width: 16px;
min-width: 16px;
height: 16px;
min-height: 16px;
position: relative;
background-color: #fff;
border-radius: 100%;
transition: all 0.3s linear;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.toggle__handler svg{
width: 12px;
height: 12px;
}
.toggle__handler .toggle__off,
input[type=checkbox]:checked+.toggle__trail .toggle__on {
display: block;
}
.toggle__handler .toggle__on,
input[type=checkbox]:checked+.toggle__trail .toggle__off {
display: none;
}
.toggle input[type=checkbox]:disabled + .toggle__trail{
background-color: #F5F5F5;
cursor: not-allowed;
}
.toggle input[type=checkbox]:disabled + .toggle__trail .toggle__off path {
fill: #E6E6E6;
}
.toggle input[type=checkbox]:disabled:checked + .toggle__trail {
background-color: #D4F1DF;
}
.toggle input[type=checkbox]:disabled:checked + .toggle__trail .toggle__on path{
fill: #D4F1DF;
}