Checkbox & Radio Button
Checkbox
- Preview
- HTML
- CSS
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox">
<span class="checkbox__checker"></span>
</label>
<!-- Para desabilitar o input checkbox aplique o atributo "disabled" na tag "input":
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox" checked>
<span class="checkbox__checker"></span>
</label>
-->
<!-- Para checar e desabilitar o input checkbox aplique o atributo "checked disabled" na tag "input":
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox" checked disabled>
<span class="checkbox__checker"></span>
</label>
-->
.checkbox__label {
display: flex;
}
.checkbox__label input[type="checkbox"] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
appearance: none;
cursor: pointer;
}
.checkbox__label input[type="checkbox"]:checked+.checkbox__checker:after {
content: '';
display: block;
position: absolute;
top: 4px;
left: 7px;
width: 7px;
height: 14px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
transition: all 150ms linear;
}
.checkbox__label input[type="checkbox"]:checked+.checkbox__checker:before {
background-color: #01141E;
border: 1.5px solid #01141E;
}
.checkbox__label input[type="checkbox"]:checked:disabled+.checkbox__checker::after {
cursor: not-allowed;
}
.checkbox__label .checkbox__checker {
position: relative;
cursor: pointer;
transition: all 150ms linear;
}
.checkbox__label .checkbox__checker:before {
content: '';
-webkit-appearance: none;
background-color: transparent;
border-radius: 2px;
border: 1.5px solid #A7A7A7;
padding: 9px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
transition: all 150ms linear;
}
.checkbox__label .checkbox__checker:is(:hover, :focus):before {
border: 1.5px solid #757575;
}
.checkbox__label input[type="checkbox"]:disabled+.checkbox__checker::before {
cursor: not-allowed;
border: 1.5px solid #E6E6E6;
}
.checkbox__label input[type="checkbox"]:checked:disabled+.checkbox__checker:before {
background-color: #E6E6E6;
border: 1.5px solid #E6E6E6;
cursor: not-allowed;
}
Checkbox com label
- Preview
- HTML
- CSS
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox">
<span class="checkbox__checker"></span>
<p class="checkbox__text">
Accept terms and conditions
</p>
</label>
<!-- Para desabilitar o input checkbox aplique o atributo "disabled" na tag "input":
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox" disabled>
<span class="checkbox__checker"></span>
<p class="checkbox__text">
Accept terms and conditions
</p>
</label>
-->
<!-- Para checar e desabilitar o input checkbox aplique o atributo "checked disabled" na tag "input":
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox" checked disabled>
<span class="checkbox__checker"></span>
<p class="checkbox__text">
Accept terms and conditions
</p>
</label>
-->
.checkbox__label {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.checkbox__label input[type="checkbox"] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.checkbox__label .checkbox__checker {
position: relative;
cursor: pointer;
transition: all 150ms linear;
}
.checkbox__label .checkbox__checker:before {
content: '';
-webkit-appearance: none;
background-color: transparent;
border-radius: 2px;
border: 1.5px solid #A7A7A7;
padding: 9px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
transition: all 150ms linear;
}
.checkbox__label .checkbox__checker:is(:hover, :focus):before {
border: 1.5px solid #757575;
}
.checkbox__label input[type="checkbox"]:checked+.checkbox__checker:after {
content: '';
display: block;
position: absolute;
top: 4px;
left: 7px;
width: 7px;
height: 14px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
transition: all 150ms linear;
}
.checkbox__label input[type="checkbox"]:checked:disabled+.checkbox__checker::after {
cursor: not-allowed;
}
.checkbox__label input[type="checkbox"]:checked+.checkbox__checker:before {
background-color: #01141E;
border: 1.5px solid #01141E;
}
.checkbox__label .checkbox__text {
color: #5C5C5C;
font-size: 14px;
font-weight: 400;
margin-left: 12px;
padding-top: 3px;
}
.checkbox__label input[type="checkbox"]:disabled+.checkbox__checker::before {
cursor: not-allowed;
border: 1.5px solid #E6E6E6;
}
.checkbox__label input[type="checkbox"]:checked:disabled+.checkbox__checker:before {
background-color: #E6E6E6;
border: 1.5px solid #E6E6E6;
cursor: not-allowed;
}
Checkbox com label e helper
- Preview
- HTML
- CSS
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox">
<span class="checkbox__checker"></span>
<div class="checkbox__texts">
<p class="checkbox__title">
Accept terms and conditions
</p>
<small class="checkbox__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
<!-- Para desabilitar o input checkbox aplique o atributo "disabled" na tag "input":
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox" disabled>
<span class="checkbox__checker"></span>
<div class="checkbox__texts">
<p class="checkbox__title">
Accept terms and conditions
</p>
<small class="checkbox__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
<!-- Para checar e desabilitar o input checkbox aplique o atributo "checked disabled" na tag "input":
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox" checked disabled>
<span class="checkbox__checker"></span>
<div class="checkbox__texts">
<p class="checkbox__title">
Accept terms and conditions
</p>
<small class="checkbox__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
.checkbox__label {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.checkbox__label input[type="checkbox"] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.checkbox__label .checkbox__checker {
position: relative;
cursor: pointer;
transition: all 200ms ease-in-out;
}
.checkbox__label .checkbox__checker:before {
content: '';
-webkit-appearance: none;
background-color: transparent;
border-radius: 2px;
border: 1.5px solid #A7A7A7;
padding: 9px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
transition: all 200ms ease-in-out;
}
.checkbox__label .checkbox__checker:is(:hover, :focus):before {
border: 1.5px solid #757575;
}
.checkbox__label input[type="checkbox"]:checked+.checkbox__checker:after {
content: '';
display: block;
position: absolute;
top: 4px;
left: 7px;
width: 7px;
height: 14px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
transition: all 200ms ease-in-out;
}
.checkbox__label input[type="checkbox"]:checked:disabled+.checkbox__checker::after {
cursor: not-allowed;
}
.checkbox__label input[type="checkbox"]:checked+.checkbox__checker:before {
background-color: #01141E;
border: 1.5px solid #01141E;
}
.checkbox__label .checkbox__texts {
display: flex;
flex-flow: column;
text-align: left;
margin-left: 12px;
padding-top: 3px;
}
.checkbox__texts .checkbox__title {
color: #5C5C5C;
font-size: 14px;
font-weight: 400;
margin-bottom: 2px;
}
.checkbox__texts .checkbox__subtitle {
color: #A7A7A7;
font-size: 12px;
font-weight: 400;
}
.checkbox__label input[type="checkbox"]:disabled+.checkbox__checker::before {
cursor: not-allowed;
border: 1.5px solid #E6E6E6;
}
.checkbox__label input[type="checkbox"]:checked:disabled+.checkbox__checker:before {
background-color: #E6E6E6;
border: 1.5px solid #E6E6E6;
cursor: not-allowed;
}
Checkbox com label, helper e borda
- Preview
- HTML
- CSS
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox">
<span class="checkbox__checker"></span>
<div class="checkbox__texts">
<p class="checkbox__title">
Accept terms and conditions
</p>
<small class="checkbox__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
<!-- Para desabilitar o input checkbox aplique o atributo "disabled" na tag "input":
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox" disabled>
<span class="checkbox__checker"></span>
<div class="checkbox__texts">
<p class="checkbox__title">
Accept terms and conditions
</p>
<small class="checkbox__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
<!-- Para checar e desabilitar o input checkbox aplique o atributo "checked disabled" na tag "input":
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox" checked disabled>
<span class="checkbox__checker"></span>
<div class="checkbox__texts">
<p class="checkbox__title">
Accept terms and conditions
</p>
<small class="checkbox__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
.checkbox__label {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 12px;
border: 1px solid #E6E6E6;
border-radius: 4px;
}
.checkbox__label input[type="checkbox"] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.checkbox__label .checkbox__checker {
position: relative;
cursor: pointer;
transition: all 200ms ease-in-out;
}
.checkbox__label .checkbox__checker:before {
content: '';
-webkit-appearance: none;
background-color: transparent;
border-radius: 2px;
border: 1.5px solid #A7A7A7;
padding: 9px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
transition: all 200ms ease-in-out;
}
.checkbox__label .checkbox__checker:is(:hover, :focus):before {
border: 1.5px solid #757575;
}
.checkbox__label input[type="checkbox"]:checked+.checkbox__checker:after {
content: '';
display: block;
position: absolute;
top: 4px;
left: 7px;
width: 7px;
height: 14px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
transition: all 200ms ease-in-out;
}
.checkbox__label input[type="checkbox"]:checked:disabled+.checkbox__checker::after {
cursor: not-allowed;
}
.checkbox__label input[type="checkbox"]:checked+.checkbox__checker:before {
background-color: #01141E;
border: 1.5px solid #01141E;
}
.checkbox__label .checkbox__texts {
display: flex;
flex-flow: column;
text-align: left;
margin-left: 12px;
padding-top: 3px;
}
.checkbox__texts .checkbox__title {
color: #5C5C5C;
font-size: 14px;
font-weight: 400;
margin-bottom: 2px;
}
.checkbox__texts .checkbox__subtitle {
color: #A7A7A7;
font-size: 12px;
font-weight: 400;
}
.checkbox__label input[type="checkbox"]:disabled+.checkbox__checker::before {
cursor: not-allowed;
border: 1.5px solid #E6E6E6;
}
.checkbox__label input[type="checkbox"]:checked:disabled+.checkbox__checker:before {
background-color: #E6E6E6;
border: 1.5px solid #E6E6E6;
cursor: not-allowed;
}
Checkbox com label do lado esquerdo
- Preview
- HTML
- CSS
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox">
<span class="checkbox__checker"></span>
<p class="checkbox__text">
Accept terms and conditions
</p>
</label>
<!-- Para desabilitar o input checkbox aplique o atributo "disabled" na tag "input":
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox" disabled>
<span class="checkbox__checker"></span>
<p class="checkbox__text">
Accept terms and conditions
</p>
</label>
-->
<!-- Para checar e desabilitar o input checkbox aplique o atributo "checked disabled" na tag "input":
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox" checked disabled>
<span class="checkbox__checker"></span>
<p class="checkbox__text">
Accept terms and conditions
</p>
</label>
-->
.checkbox__label {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
}
.checkbox__label input[type="checkbox"] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.checkbox__label .checkbox__checker {
position: relative;
cursor: pointer;
transition: all 150ms linear;
}
.checkbox__label .checkbox__checker:before {
content: '';
-webkit-appearance: none;
background-color: transparent;
border-radius: 2px;
border: 1.5px solid #A7A7A7;
padding: 9px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
transition: all 150ms linear;
}
.checkbox__label .checkbox__checker:is(:hover, :focus):before {
border: 1.5px solid #757575;
}
.checkbox__label input[type="checkbox"]:checked+.checkbox__checker:after {
content: '';
display: block;
position: absolute;
top: 4px;
left: 7px;
width: 7px;
height: 14px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
transition: all 150ms linear;
}
.checkbox__label input[type="checkbox"]:checked:disabled+.checkbox__checker::after {
cursor: not-allowed;
}
.checkbox__label input[type="checkbox"]:checked+.checkbox__checker:before {
background-color: #01141E;
border: 1.5px solid #01141E;
}
.checkbox__label .checkbox__text {
color: #5C5C5C;
font-size: 14px;
font-weight: 400;
margin-right: 12px;
padding-top: 3px;
}
.checkbox__label input[type="checkbox"]:disabled+.checkbox__checker::before {
cursor: not-allowed;
border: 1.5px solid #E6E6E6;
}
.checkbox__label input[type="checkbox"]:checked:disabled+.checkbox__checker:before {
background-color: #E6E6E6;
border: 1.5px solid #E6E6E6;
cursor: not-allowed;
}
Checkbox com label e helper do lado esquerdo
- Preview
- HTML
- CSS
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox">
<span class="checkbox__checker"></span>
<div class="checkbox__texts">
<p class="checkbox__title">
Accept terms and conditions
</p>
<small class="checkbox__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
<!-- Para desabilitar o input checkbox aplique o atributo "disabled" na tag "input":
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox" disabled>
<span class="checkbox__checker"></span>
<div class="checkbox__texts">
<p class="checkbox__title">
Accept terms and conditions
</p>
<small class="checkbox__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
<!-- Para checar e desabilitar o input checkbox aplique o atributo "checked disabled" na tag "input":
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox" checked disabled>
<span class="checkbox__checker"></span>
<div class="checkbox__texts">
<p class="checkbox__title">
Accept terms and conditions
</p>
<small class="checkbox__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
.checkbox__label {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
}
.checkbox__label input[type="checkbox"] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.checkbox__label .checkbox__checker {
position: relative;
cursor: pointer;
transition: all 200ms ease-in-out;
}
.checkbox__label .checkbox__checker:before {
content: '';
-webkit-appearance: none;
background-color: transparent;
border-radius: 2px;
border: 1.5px solid #A7A7A7;
padding: 9px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
transition: all 200ms ease-in-out;
}
.checkbox__label .checkbox__checker:is(:hover, :focus):before {
border: 1.5px solid #757575;
}
.checkbox__label input[type="checkbox"]:checked+.checkbox__checker:after {
content: '';
display: block;
position: absolute;
top: 4px;
left: 7px;
width: 7px;
height: 14px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
transition: all 200ms ease-in-out;
}
.checkbox__label input[type="checkbox"]:checked:disabled+.checkbox__checker::after {
cursor: not-allowed;
}
.checkbox__label input[type="checkbox"]:checked+.checkbox__checker:before {
background-color: #01141E;
border: 1.5px solid #01141E;
}
.checkbox__label .checkbox__texts {
display: flex;
flex-flow: column;
text-align: left;
margin-right: 12px;
padding-top: 3px;
}
.checkbox__texts .checkbox__title {
color: #5C5C5C;
font-size: 14px;
font-weight: 400;
margin-bottom: 2px;
}
.checkbox__texts .checkbox__subtitle {
color: #A7A7A7;
font-size: 12px;
font-weight: 400;
}
.checkbox__label input[type="checkbox"]:disabled+.checkbox__checker::before {
cursor: not-allowed;
border: 1.5px solid #E6E6E6;
}
.checkbox__label input[type="checkbox"]:checked:disabled+.checkbox__checker:before {
background-color: #E6E6E6;
border: 1.5px solid #E6E6E6;
cursor: not-allowed;
}
Checkbox com label e helper do lado esquerdo com borda
- Preview
- HTML
- CSS
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox">
<span class="checkbox__checker"></span>
<div class="checkbox__texts">
<p class="checkbox__title">
Accept terms and conditions
</p>
<small class="checkbox__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
<!-- Para desabilitar o input checkbox aplique o atributo "disabled" na tag "input":
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox" disabled>
<span class="checkbox__checker"></span>
<div class="checkbox__texts">
<p class="checkbox__title">
Accept terms and conditions
</p>
<small class="checkbox__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
<!-- Para checar e desabilitar o input checkbox aplique o atributo "checked disabled" na tag "input":
<label class="checkbox__label" for="main-checkbox">
<input type="checkbox" name="checkbox" id="main-checkbox" checked disabled>
<span class="checkbox__checker"></span>
<div class="checkbox__texts">
<p class="checkbox__title">
Accept terms and conditions
</p>
<small class="checkbox__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
.checkbox__label {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
padding: 12px;
border: 1px solid #E6E6E6;
border-radius: 4px;
}
.checkbox__label input[type="checkbox"] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.checkbox__label .checkbox__checker {
position: relative;
cursor: pointer;
transition: all 200ms ease-in-out;
}
.checkbox__label .checkbox__checker:before {
content: '';
-webkit-appearance: none;
background-color: transparent;
border-radius: 2px;
border: 1.5px solid #A7A7A7;
padding: 9px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
transition: all 200ms ease-in-out;
}
.checkbox__label .checkbox__checker:is(:hover, :focus):before {
border: 1.5px solid #757575;
}
.checkbox__label input[type="checkbox"]:checked+.checkbox__checker:after {
content: '';
display: block;
position: absolute;
top: 4px;
left: 7px;
width: 7px;
height: 14px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
transition: all 200ms ease-in-out;
}
.checkbox__label input[type="checkbox"]:checked:disabled+.checkbox__checker::after {
cursor: not-allowed;
}
.checkbox__label input[type="checkbox"]:checked+.checkbox__checker:before {
background-color: #01141E;
border: 1.5px solid #01141E;
}
.checkbox__label .checkbox__texts {
display: flex;
flex-flow: column;
text-align: left;
margin-right: 12px;
padding-top: 3px;
}
.checkbox__texts .checkbox__title {
color: #5C5C5C;
font-size: 14px;
font-weight: 400;
margin-bottom: 2px;
}
.checkbox__texts .checkbox__subtitle {
color: #A7A7A7;
font-size: 12px;
font-weight: 400;
}
.checkbox__label input[type="checkbox"]:disabled+.checkbox__checker::before {
cursor: not-allowed;
border: 1.5px solid #E6E6E6;
}
.checkbox__label input[type="checkbox"]:checked:disabled+.checkbox__checker:before {
background-color: #E6E6E6;
border: 1.5px solid #E6E6E6;
cursor: not-allowed;
}
Radio Button
- Preview
- HTML
- CSS
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio">
<span class="radio__checker"></span>
</label>
<!-- Para desabilitar o input radio aplique o atributo "disabled" na tag "input":
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio" disabled>
<span class="radio__checker"></span>
</label>
-->
<!-- Para checar e desabilitar o input radio aplique o atributo "checked disabled" na tag "input":
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio" checked disabled>
<span class="radio__checker"></span>
</label>
-->
.radio__label {
display: flex;
}
.radio__label input[type="radio"] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.radio__label input[type="radio"]:checked + .radio__checker:before {
background-color: #01141E;
border: 1.5px solid #01141E;
}
.radio__label input[type="radio"]:checked + .radio__checker:after {
content: '';
position: absolute;
left: 10px;
top: 10px;
transform: translate(-50%, -50%);
height: 17px;
width: 17px;
border-radius: 50%;
border: solid 2px #FFFFFF;
transition: all 150ms linear;
}
.radio__label .radio__checker {
position: relative;
cursor: pointer;
transition: all 150ms linear;
overflow: hidden;
border-radius: 50%;
height: 20px;
min-width: 20px;
}
.radio__label .radio__checker:is(:hover, :focus):before {
border: 1.5px solid #757575;
}
.radio__label .radio__checker:before {
content: '';
-webkit-appearance: none;
background-color: #fff;
border-radius: 50%;
border: 1.5px solid #A7A7A7;
width: 20px;
height: 20px;
display: inline-block;
position: relative;
cursor: pointer;
transition: all 150ms linear;
}
.radio__label input[type="radio"]:disabled + .radio__checker::before {
cursor: not-allowed;
border: 1.5px solid #E6E6E6;
}
.radio__label input[type="radio"]:checked:disabled + .radio__checker::after {
cursor: not-allowed;
}
.radio__label input[type="radio"]:checked:disabled + .radio__checker::before {
background-color: #E6E6E6;
}
Radio Button com label
- Preview
- HTML
- CSS
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio">
<span class="radio__checker"></span>
<p class="radio__text">
Accept terms and conditions
</p>
</label>
<!-- Para desabilitar o input radio aplique o atributo "disabled" na tag "input":
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio" disabled>
<span class="radio__checker"></span>
<p class="radio__text">
Accept terms and conditions
</p>
</label>
-->
<!-- Para checar e desabilitar o input radio aplique o atributo "checked disabled" na tag "input":
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio" checked disabled>
<span class="radio__checker"></span>
<p class="radio__text">
Accept terms and conditions
</p>
</label>
-->
.radio__label {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.radio__label input[type="radio"] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.radio__label input[type="radio"]:checked+.radio__checker:before {
background-color: #01141E;
border: 1.5px solid #01141E;
}
.radio__label input[type="radio"]:checked+.radio__checker:after {
content: '';
position: absolute;
left: 10px;
top: 10px;
transform: translate(-50%, -50%);
height: 17px;
width: 17px;
border-radius: 50%;
border: solid 2px #FFFFFF;
transition: all 150ms linear;
}
.radio__label .radio__checker {
position: relative;
cursor: pointer;
transition: all 150ms linear;
overflow: hidden;
border-radius: 50%;
height: 20px;
min-width: 20px;
}
.radio__label .radio__checker:is(:hover, :focus):before {
border: 1.5px solid #757575;
}
.radio__label .radio__checker:before {
content: '';
-webkit-appearance: none;
background-color: #fff;
border-radius: 50%;
border: 1.5px solid #A7A7A7;
width: 20px;
height: 20px;
display: inline-block;
position: relative;
cursor: pointer;
transition: all 150ms linear;
}
.radio__label .radio__text {
color: #5C5C5C;
font-size: 14px;
font-style: normal;
font-weight: 400;
margin-left: 12px;
}
.radio__label input[type="radio"]:disabled+.radio__checker::before {
cursor: not-allowed;
border: 1.5px solid #E6E6E6;
}
.radio__label input[type="radio"]:checked:disabled+.radio__checker::after {
cursor: not-allowed;
}
.radio__label input[type="radio"]:checked:disabled+.radio__checker::before {
background-color: #E6E6E6;
}
Radio Button com label e helper
- Preview
- HTML
- CSS
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio">
<span class="radio__checker"></span>
<div class="radio__texts">
<p class="radio__title">
Accept terms and conditions
</p>
<small class="radio__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
<!-- Para desabilitar o input radio aplique o atributo "disabled" na tag "input":
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio" disabled>
<span class="radio__checker"></span>
<div class="radio__texts">
<p class="radio__title">
Accept terms and conditions
</p>
<small class="radio__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
<!-- Para checar e desabilitar o input radio aplique o atributo "checked disabled" na tag "input":
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio" checked disabled>
<span class="radio__checker"></span>
<div class="radio__texts">
<p class="radio__title">
Accept terms and conditions
</p>
<small class="radio__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
.radio__label {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.radio__label input[type="radio"] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.radio__label input[type="radio"]:checked+.radio__checker:before {
background-color: #01141E;
border: 1.5px solid #01141E;
}
.radio__label input[type="radio"]:checked+.radio__checker:after {
content: '';
position: absolute;
left: 10px;
top: 10px;
transform: translate(-50%, -50%);
height: 17px;
width: 17px;
border-radius: 50%;
border: solid 2px #FFFFFF;
transition: all 150ms linear;
}
.radio__label .radio__checker {
position: relative;
cursor: pointer;
transition: all 150ms linear;
overflow: hidden;
border-radius: 50%;
height: 20px;
min-width: 20px;
}
.radio__label .radio__checker:is(:hover, :focus):before {
border: 1.5px solid #757575;
}
.radio__label .radio__checker:before {
content: '';
-webkit-appearance: none;
background-color: #fff;
border-radius: 50%;
border: 1.5px solid #A7A7A7;
width: 20px;
height: 20px;
display: inline-block;
position: relative;
cursor: pointer;
transition: all 150ms linear;
}
.radio__label .radio__texts {
display: flex;
flex-flow: column;
text-align: left;
margin-left: 12px;
}
.radio__texts .radio__title {
color: #5C5C5C;
font-size: 14px;
font-weight: 400;
margin-bottom: 2px;
}
.radio__texts .radio__subtitle {
color: #A7A7A7;
font-size: 12px;
font-weight: 400;
}
.radio__label input[type="radio"]:disabled+.radio__checker::before {
cursor: not-allowed;
border: 1.5px solid #E6E6E6;
}
.radio__label input[type="radio"]:checked:disabled+.radio__checker::after {
cursor: not-allowed;
}
.radio__label input[type="radio"]:checked:disabled+.radio__checker::before {
background-color: #E6E6E6;
}
Radio Button com label, helper e borda
- Preview
- HTML
- CSS
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio">
<span class="radio__checker"></span>
<div class="radio__texts">
<p class="radio__title">
Accept terms and conditions
</p>
<small class="radio__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
<!-- Para desabilitar o input radio aplique o atributo "disabled" na tag "input":
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio" disabled>
<span class="radio__checker"></span>
<div class="radio__texts">
<p class="radio__title">
Accept terms and conditions
</p>
<small class="radio__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
<!-- Para checar e desabilitar o input radio aplique o atributo "checked disabled" na tag "input":
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio" checked disabled>
<span class="radio__checker"></span>
<div class="radio__texts">
<p class="radio__title">
Accept terms and conditions
</p>
<small class="radio__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
.radio__label {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 12px;
border: 1px solid #E6E6E6;
border-radius: 4px;
}
.radio__label input[type="radio"] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.radio__label input[type="radio"]:checked + .radio__checker:before {
background-color: #01141E;
border: 1.5px solid #01141E;
}
.radio__label input[type="radio"]:checked + .radio__checker:after {
content: '';
position: absolute;
left: 10px;
top: 10px;
transform: translate(-50%, -50%);
height: 17px;
width: 17px;
border-radius: 50%;
border: solid 2px #FFFFFF;
transition: all 150ms linear;
}
.radio__label .radio__checker {
position: relative;
cursor: pointer;
transition: all 150ms linear;
overflow: hidden;
border-radius: 50%;
height: 20px;
min-width: 20px;
}
.radio__label .radio__checker:is(:hover, :focus):before {
border: 1.5px solid #757575;
}
.radio__label .radio__checker:before {
content: '';
-webkit-appearance: none;
background-color: #fff;
border-radius: 50%;
border: 1.5px solid #A7A7A7;
width: 20px;
height: 20px;
display: inline-block;
position: relative;
cursor: pointer;
transition: all 150ms linear;
}
.radio__label .radio__texts {
display: flex;
flex-flow: column;
text-align: left;
margin-left: 12px;
}
.radio__texts .radio__title {
color: #5C5C5C;
font-size: 14px;
font-weight: 400;
margin-bottom: 2px;
}
.radio__texts .radio__subtitle {
color: #A7A7A7;
font-size: 12px;
font-weight: 400;
}
.radio__label input[type="radio"]:disabled + .radio__checker::before {
cursor: not-allowed;
border: 1.5px solid #E6E6E6;
}
.radio__label input[type="radio"]:checked:disabled + .radio__checker::after {
cursor: not-allowed;
}
.radio__label input[type="radio"]:checked:disabled + .radio__checker::before {
background-color: #E6E6E6;
}
Radio Button com label do lado esquerdo
- Preview
- HTML
- CSS
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio">
<span class="radio__checker"></span>
<p class="radio__text">
Accept terms and conditions
</p>
</label>
<!-- Para desabilitar o input radio aplique o atributo "disabled" na tag "input":
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio" disabled>
<span class="radio__checker"></span>
<p class="radio__text">
Accept terms and conditions
</p>
</label>
-->
<!-- Para checar e desabilitar o input radio aplique o atributo "checked disabled" na tag "input":
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio" checked disabled>
<span class="radio__checker"></span>
<p class="radio__text">
Accept terms and conditions
</p>
</label>
-->
.radio__label {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
}
.radio__label input[type="radio"] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.radio__label input[type="radio"]:checked+.radio__checker:before {
background-color: #01141E;
border: 1.5px solid #01141E;
}
.radio__label input[type="radio"]:checked+.radio__checker:after {
content: '';
position: absolute;
left: 10px;
top: 10px;
transform: translate(-50%, -50%);
height: 17px;
width: 17px;
border-radius: 50%;
border: solid 2px #FFFFFF;
transition: all 150ms linear;
}
.radio__label .radio__checker {
position: relative;
cursor: pointer;
transition: all 150ms linear;
overflow: hidden;
border-radius: 50%;
height: 20px;
min-width: 20px;
}
.radio__label .radio__checker:is(:hover, :focus):before {
border: 1.5px solid #757575;
}
.radio__label .radio__checker:before {
content: '';
-webkit-appearance: none;
background-color: #fff;
border-radius: 50%;
border: 1.5px solid #A7A7A7;
width: 20px;
height: 20px;
display: inline-block;
position: relative;
cursor: pointer;
transition: all 150ms linear;
}
.radio__label .radio__text {
color: #5C5C5C;
font-size: 14px;
font-style: normal;
font-weight: 400;
margin-right: 12px;
}
.radio__label input[type="radio"]:disabled+.radio__checker::before {
cursor: not-allowed;
border: 1.5px solid #E6E6E6;
}
.radio__label input[type="radio"]:checked:disabled+.radio__checker::after {
cursor: not-allowed;
}
.radio__label input[type="radio"]:checked:disabled+.radio__checker::before {
background-color: #E6E6E6;
}
Radio Button com label e helper do lado esquerdo
- Preview
- HTML
- CSS
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio">
<span class="radio__checker"></span>
<div class="radio__texts">
<p class="radio__title">
Accept terms and conditions
</p>
<small class="radio__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
<!-- Para desabilitar o input radio aplique o atributo "disabled" na tag "input":
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio" disabled>
<span class="radio__checker"></span>
<div class="radio__texts">
<p class="radio__title">
Accept terms and conditions
</p>
<small class="radio__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
<!-- Para checar e desabilitar o input radio aplique o atributo "checked disabled" na tag "input":
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio" checked disabled>
<span class="radio__checker"></span>
<div class="radio__texts">
<p class="radio__title">
Accept terms and conditions
</p>
<small class="radio__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
.radio__label {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
}
.radio__label input[type="radio"] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.radio__label input[type="radio"]:checked+.radio__checker:before {
background-color: #01141E;
border: 1.5px solid #01141E;
}
.radio__label input[type="radio"]:checked+.radio__checker:after {
content: '';
position: absolute;
left: 10px;
top: 10px;
transform: translate(-50%, -50%);
height: 17px;
width: 17px;
border-radius: 50%;
border: solid 2px #FFFFFF;
transition: all 150ms linear;
}
.radio__label .radio__checker {
position: relative;
cursor: pointer;
transition: all 150ms linear;
overflow: hidden;
border-radius: 50%;
height: 20px;
min-width: 20px;
}
.radio__label .radio__checker:is(:hover, :focus):before {
border: 1.5px solid #757575;
}
.radio__label .radio__checker:before {
content: '';
-webkit-appearance: none;
background-color: #fff;
border-radius: 50%;
border: 1.5px solid #A7A7A7;
width: 20px;
height: 20px;
display: inline-block;
position: relative;
cursor: pointer;
transition: all 150ms linear;
}
.radio__label .radio__texts {
display: flex;
flex-flow: column;
text-align: left;
margin-right: 12px;
}
.radio__texts .radio__title {
color: #5C5C5C;
font-size: 14px;
font-weight: 400;
margin-bottom: 2px;
}
.radio__texts .radio__subtitle {
color: #A7A7A7;
font-size: 12px;
font-weight: 400;
}
.radio__label input[type="radio"]:disabled+.radio__checker::before {
cursor: not-allowed;
border: 1.5px solid #E6E6E6;
}
.radio__label input[type="radio"]:checked:disabled+.radio__checker::after {
cursor: not-allowed;
}
.radio__label input[type="radio"]:checked:disabled+.radio__checker::before {
background-color: #E6E6E6;
}
Radio Button com label e helper do lado esquerdo com borda
- Preview
- HTML
- CSS
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio">
<span class="radio__checker"></span>
<div class="radio__texts">
<p class="radio__title">
Accept terms and conditions
</p>
<small class="radio__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
<!-- Para desabilitar o input radio aplique o atributo "disabled" na tag "input":
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio" disabled>
<span class="radio__checker"></span>
<div class="radio__texts">
<p class="radio__title">
Accept terms and conditions
</p>
<small class="radio__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
<!-- Para checar e desabilitar o input radio aplique o atributo "checked disabled" na tag "input":
<label class="radio__label" for="main-radio">
<input type="radio" name="radio" id="main-radio" checked disabled>
<span class="radio__checker"></span>
<div class="radio__texts">
<p class="radio__title">
Accept terms and conditions
</p>
<small class="radio__subtitle">Lorem ipsum sit amet</small>
</div>
</label>
-->
.radio__label {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
padding: 12px;
border: 1px solid #E6E6E6;
border-radius: 4px;
}
.radio__label input[type="radio"] {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.radio__label input[type="radio"]:checked+.radio__checker:before {
background-color: #01141E;
border: 1.5px solid #01141E;
}
.radio__label input[type="radio"]:checked+.radio__checker:after {
content: '';
position: absolute;
left: 10px;
top: 10px;
transform: translate(-50%, -50%);
height: 17px;
width: 17px;
border-radius: 50%;
border: solid 2px #FFFFFF;
transition: all 150ms linear;
}
.radio__label .radio__checker {
position: relative;
cursor: pointer;
transition: all 150ms linear;
overflow: hidden;
border-radius: 50%;
height: 20px;
min-width: 20px;
}
.radio__label .radio__checker:is(:hover, :focus):before {
border: 1.5px solid #757575;
}
.radio__label .radio__checker:before {
content: '';
-webkit-appearance: none;
background-color: #fff;
border-radius: 50%;
border: 1.5px solid #A7A7A7;
width: 20px;
height: 20px;
display: inline-block;
position: relative;
cursor: pointer;
transition: all 150ms linear;
}
.radio__label .radio__texts {
display: flex;
flex-flow: column;
text-align: left;
margin-right: 12px;
}
.radio__texts .radio__title {
color: #5C5C5C;
font-size: 14px;
font-weight: 400;
margin-bottom: 2px;
}
.radio__texts .radio__subtitle {
color: #A7A7A7;
font-size: 12px;
font-weight: 400;
}
.radio__label input[type="radio"]:disabled+.radio__checker::before {
cursor: not-allowed;
border: 1.5px solid #E6E6E6;
}
.radio__label input[type="radio"]:checked:disabled+.radio__checker::after {
cursor: not-allowed;
}
.radio__label input[type="radio"]:checked:disabled+.radio__checker::before {
background-color: #E6E6E6;
}