<div class="form-switch error">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Field Text</fieldset>
<div class="field-top__wrap">
<a class="link
link_inline
" href="#">
<span>Link</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip flex">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Títulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="form-switch-group" id="">
<ul class="switch-group">
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="switch1" type="radio" title="Switch 1" name="Switch group" value="1">
<label class="switch-label" for="switch1">
<div class="text-label-m">1</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="switch2" type="radio" title="Switch 2" name="Switch group" value="2">
<label class="switch-label" for="switch2">
<div class="text-label-m">2</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="switch3" type="radio" title="Switch 3" name="Switch group" value="3">
<label class="switch-label" for="switch3">
<div class="text-label-m">3</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="switch4" type="radio" title="Switch 4" name="Switch group" value="4">
<label class="switch-label" for="switch4">
<div class="text-label-m">4</div>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom error">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
<div class="form-switch{{#if isError}} error{{/if}}">
{{> @field-top field-top }}
<div class="form-switch-group" id="{{ id }}">
{{> @switch-group switch-group }}
</div>
{{> @field-bottom field-bottom }}
</div>
{
"field-top": {
"fieldset": true,
"label": {
"text": "Field Text",
"fieldset": true
},
"link": {
"isInline": true,
"href": "#",
"text": "Link"
},
"tooltip": {
"isFlex": true,
"title": {
"text": "Títulilllo",
"isP": true
},
"bodycopy": {
"text": "Este es el texto."
},
"link": {
"href": "#",
"text": "Enlacillo"
}
}
},
"switch-group": {
"switch-group": [
{
"id": "switch1",
"title": "Switch 1",
"name": "Switch group",
"label": {
"text": "1"
}
},
{
"id": "switch2",
"title": "Switch 2",
"name": "Switch group",
"label": {
"text": "2"
}
},
{
"id": "switch3",
"title": "Switch 3",
"name": "Switch group",
"label": {
"text": "3"
}
},
{
"id": "switch4",
"title": "Switch 4",
"name": "Switch group",
"label": {
"text": "4"
}
}
]
},
"isError": true,
"field-bottom": {
"isError": true,
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
.form-switch {
margin-bottom: 20px;
&.error {
.field-bottom {
&__error-message {
display:block;
position: relative;
}
&__helper-text{display:none;}
}
}
}
No notes defined.