<!-- Default -->
<div class="inv-radial-select">
<input id="male" name="sex" type="radio" class="inv-radial-select__radio" value="male" />
<label class="inv-radial-select__label" for="male">male</label>
</div>
<div class="inv-radial-select">
<input id="female" name="sex" type="radio" class="inv-radial-select__radio" value="female" />
<label class="inv-radial-select__label" for="female">female</label>
</div>
<!-- Disabled -->
<div class="inv-radial-select">
<input id="disabled" name="sex" type="radio" class="inv-radial-select__radio" value="disabled" disabled />
<label class="inv-radial-select__label" for="disabled">disabled</label>
</div>
{{#each radial-select.options as |value|}}
<div class="inv-radial-select">
<input
id="{{ value }}"
name="sex"
type="radio"
class="inv-radial-select__radio"
value="{{ value }}"
{{ternary ../disabled "disabled" "" }}
/>
<label class="inv-radial-select__label" for="{{ value }}">{{ value }}</label>
</div>
{{/each}}
/* Default */
{
"radial-select": {
"options": [
"male",
"female"
]
}
}
/* Disabled */
{
"disabled": true,
"radial-select": {
"options": [
"disabled"
]
}
}
.inv-radial-select {
appearance: none;
display: flex;
}
.inv-radial-select__radio {
display: none;
}
.inv-radial-select__label {
background-color: var(--color-default--white);
box-shadow: var(--shadow-border-1) var(--color-system--regular);
color: var(--color-default--dark);
font-size: 14px;
font-weight: 600;
border-radius: 4px;
min-height: 40px;
padding-left: 16px;
padding-right: 16px;
display: flex;
align-items: center;
cursor: pointer;
transition: 0.2s box-shadow, 0.2s background-color;
}
.inv-radial-select__label:hover {
box-shadow:
var(--shadow-border-1) var(--color-system--regular),
var(--shadow-8) var(--color-default--shadow);
background-color: var(--color-default--white);
}
.inv-radial-select__radio ~ .inv-radial-select__label:active {
background-color: var(--color-primary--white);
box-shadow:
var(--shadow-border-1) var(--color-primary--dark),
var(--shadow-8) var(--color-primary--shadow);
color: var(--color-primary--dark);
}
.inv-radial-select__radio:disabled ~ .inv-radial-select__label {
background-color: var(--color-default--white);
box-shadow: none;
color: var(--color-default--light);
cursor: not-allowed;
}
.inv-radial-select__radio:checked ~ .inv-radial-select__label {
background-color: var(--color-primary--white);
box-shadow: var(--shadow-border-1) var(--color-primary--regular);
color: var(--color-primary--regular);
}
.inv-radial-select__radio:checked ~ .inv-radial-select__label:hover {
background-color: var(--color-primary--white);
box-shadow:
var(--shadow-border-1) var(--color-primary--regular),
var(--shadow-8) var(--color-primary--shadow);
}
Radio button da aplicação
Tendo a classe base .inv-radial-select
, e é formado por:
.inv-radial-select__radio
.inv-radial-select__label
Componente padrão, comum para ações regulares dos usuários.
<div class="inv-radial-select">
<input id="male" name="sex" type="radio" class="inv-radial-select__radio" value="male" />
<label class="inv-radial-select__label" for="male">male</label>
</div>
<div class="inv-radial-select">
<input id="female" name="sex" type="radio" class="inv-radial-select__radio" value="female" />
<label class="inv-radial-select__label" for="female">female</label>
</div>
Modificadores | Uso |
---|---|
disabled |
Modifica o radial select com estado de desabilitado |
Versão de desabilitada do componente.
Basta inserir o atributo disabled
no input radio.
<div class="inv-radial-select">
<input id="disabled" name="sex" type="radio" class="inv-radial-select__radio" value="disabled" disabled />
<label class="inv-radial-select__label" for="disabled">disabled</label>
</div>