<div class="inputs-example">
<div class="container">
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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> <input class="input
input-distinguisher_name
" id="randomInputId211" type="text" name="" title="Name" autocomplete="" placeholder="Placeholder" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-fieldset disabled" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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> <input class="input disabled
input-distinguisher_name
" id="randomInputId211" type="text" name="" title="Name" autocomplete="" placeholder="Placeholder" disabled />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-fieldset bgtransparent" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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> <input class="input
input-distinguisher_name
" id="randomInputId211" type="text" name="" title="Name" autocomplete="" placeholder="Placeholder" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-fieldset bgaccentlight" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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> <input class="input
input-distinguisher_name
" id="randomInputId211" type="text" name="" title="Name" autocomplete="" placeholder="Placeholder" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-fieldset error" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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> <input class="input
input-distinguisher_name
" id="randomInputId211" type="text" name="" title="Name" autocomplete="" placeholder="Placeholder" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-select " id="where">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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="access-select ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option">Placeholder</div>
<div class="access-select__chosen-icon">
<svg class="icon icon-chebron-down ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</div>
</div>
<ul class="access-select__list">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where1" type="radio" title="Provincia 1" name="where" value="">
<label class="access-select__option access-select__label" for="where1">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where2" type="radio" title="Provincia 2" name="where" value="">
<label class="access-select__option access-select__label" for="where2">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where3" type="radio" title="Provincia 3" name="where" value="">
<label class="access-select__option access-select__label" for="where3">
Provincia 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-select disabled" id="where_2">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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="access-select disabled ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option">Placeholder</div>
<div class="access-select__chosen-icon">
<svg class="icon icon-chebron-down ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</div>
</div>
<ul class="access-select__list">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where_21" type="radio" title="Provincia 1" name="where" value="">
<label class="access-select__option access-select__label" for="where_21">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where_22" type="radio" title="Provincia 2" name="where" value="">
<label class="access-select__option access-select__label" for="where_22">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where_23" type="radio" title="Provincia 3" name="where" value="">
<label class="access-select__option access-select__label" for="where_23">
Provincia 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-select bgtransparent" id="where_3">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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="access-select ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option">Placeholder</div>
<div class="access-select__chosen-icon">
<svg class="icon icon-chebron-down ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</div>
</div>
<ul class="access-select__list">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where_31" type="radio" title="Provincia 1" name="where" value="">
<label class="access-select__option access-select__label" for="where_31">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where_32" type="radio" title="Provincia 2" name="where" value="">
<label class="access-select__option access-select__label" for="where_32">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where_33" type="radio" title="Provincia 3" name="where" value="">
<label class="access-select__option access-select__label" for="where_33">
Provincia 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-select bgaccentlight" id="where_4">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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="access-select ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option">Placeholder</div>
<div class="access-select__chosen-icon">
<svg class="icon icon-chebron-down ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</div>
</div>
<ul class="access-select__list">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where_41" type="radio" title="Provincia 1" name="where" value="">
<label class="access-select__option access-select__label" for="where_41">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where_42" type="radio" title="Provincia 2" name="where" value="">
<label class="access-select__option access-select__label" for="where_42">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where_43" type="radio" title="Provincia 3" name="where" value="">
<label class="access-select__option access-select__label" for="where_43">
Provincia 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-select error" id="where_5">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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="access-select ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option">Placeholder</div>
<div class="access-select__chosen-icon">
<svg class="icon icon-chebron-down ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</div>
</div>
<ul class="access-select__list">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where_51" type="radio" title="Provincia 1" name="where" value="">
<label class="access-select__option access-select__label" for="where_51">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where_52" type="radio" title="Provincia 2" name="where" value="">
<label class="access-select__option access-select__label" for="where_52">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="wher_53" type="radio" title="Provincia 3" name="where" value="">
<label class="access-select__option access-select__label" for="wher_53">
Provincia 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Example form input" value="5.000">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-input disabled">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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-input__fieldset disabled">
<input class="form-input__input " id="" type="text" name="" title="Example form input" value="5.000" disabled>
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-input bgtransparent">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Example form input" value="5.000">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-input bgaccentlight">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Example form input" value="5.000">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-input error">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="Example form input" value="5.000">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-range-slider" id="ageRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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="range-slider" id="ageRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Cuál es tu edad" min='18' max='74' data-default='30'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
años
</div>
</div>
</div>
<div class="range-slider__slider" id=""></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
18 años
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
74 años
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-range-slider bgtransparent" id="netRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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="range-slider" id="netRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Cuál es tu edad" min='18' max='74' data-default='30'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
años
</div>
</div>
</div>
<div class="range-slider__slider" id=""></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
18 años
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
74 años
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-range-slider bgaccentlight" id="paymentsNumberRangeSlider">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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="range-slider" id="paymentsNumberRangeInput">
<div class="range-slider__fieldset">
<input class="range-slider__input" id="" type="text" name="" title="Cuál es tu edad" min='18' max='74' data-default='30'>
<div class="range-slider__symbol" for="">
<div class="bodycopy-xs
">
años
</div>
</div>
</div>
<div class="range-slider__slider" id=""></div>
<div class="range-slider__legend">
<div class="range-slider__legend-start">
<div class="bodycopy-xs
">
18 años
</div>
</div>
<div class="range-slider__legend-end">
<div class="bodycopy-xs
">
74 años
</div>
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-radio-group " id="reasonBuying">
<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="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingSecond" type="radio" title="Second Home" name="reasonBuying" value="Sí" checked>
<label class="radio-label " for="reasonBuyingSecond" id="" value="">
<span class="caption-placeholder-m">Sí</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingRelocation" type="radio" title="Relocation" name="reasonBuying" value="No">
<label class="radio-label " for="reasonBuyingRelocation" id="" value="">
<span class="caption-placeholder-m">No</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-radio-group inColumn" id="reasonBuying">
<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="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingSecond" type="radio" title="Second Home" name="reasonBuying" value="SECOND HOME" checked>
<label class="radio-label " for="reasonBuyingSecond" id="" value="">
<span class="caption-placeholder-m">SECOND HOME</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingRelocation" type="radio" title="Relocation" name="reasonBuying" value="RELOCATION">
<label class="radio-label " for="reasonBuyingRelocation" id="" value="">
<span class="caption-placeholder-m">RELOCATION</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingOther" type="radio" title="Other" name="reasonBuying" value="OTHER">
<label class="radio-label " for="reasonBuyingOther" id="" value="">
<span class="caption-placeholder-m">OTHER</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-radio-group inColumn bgtransparent" id="reasonBuying">
<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="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingSecond" type="radio" title="Second Home" name="reasonBuying" value="SECOND HOME" checked>
<label class="radio-label " for="reasonBuyingSecond" id="" value="">
<span class="caption-placeholder-m">SECOND HOME</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingRelocation" type="radio" title="Relocation" name="reasonBuying" value="RELOCATION">
<label class="radio-label " for="reasonBuyingRelocation" id="" value="">
<span class="caption-placeholder-m">RELOCATION</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingOther" type="radio" title="Other" name="reasonBuying" value="OTHER">
<label class="radio-label " for="reasonBuyingOther" id="" value="">
<span class="caption-placeholder-m">OTHER</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-radio-group inColumn bgaccentlight" id="reasonBuying">
<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="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingSecond" type="radio" title="Second Home" name="reasonBuying" value="SECOND HOME" checked>
<label class="radio-label " for="reasonBuyingSecond" id="" value="">
<span class="caption-placeholder-m">SECOND HOME</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingRelocation" type="radio" title="Relocation" name="reasonBuying" value="RELOCATION">
<label class="radio-label " for="reasonBuyingRelocation" id="" value="">
<span class="caption-placeholder-m">RELOCATION</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="reasonBuyingOther" type="radio" title="Other" name="reasonBuying" value="OTHER">
<label class="radio-label " for="reasonBuyingOther" id="" value="">
<span class="caption-placeholder-m">OTHER</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-checkbox-group" id="moreInfo">
<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="checkbox-group" id="">
<ul class="column">
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoReform" type="checkbox" name="House needs a reform" title="House needs a reform">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoReform">
<span class="caption-placeholder-m">LA VIVIENDA NECESITA UNA REFORMA</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoNotYetBuilt" type="checkbox" name="House is not yet built" title="House is not yet built">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoNotYetBuilt">
<span class="caption-placeholder-m">LA CASA QUE QUIERO COMPRAR NO HA EMPEZADO A CONSTRUIRSE</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoSwitchHouseActiveMortgage" type="checkbox" name="I want to switch the house, but I have an active mortgage" title="I want to switch the house, but I have an active mortgage">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoSwitchHouseActiveMortgage">
<span class="caption-placeholder-m">QUIERO CAMBIAR DE CASA Y YA TENGO UNA HIPOTECA ACTIVA</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-checkbox-group" id="moreInfo">
<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="checkbox-group" id="">
<ul>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoReform" type="checkbox" name="House needs a reform" title="House needs a reform">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoReform">
<span class="caption-placeholder-m">Opcion 1</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoNotYetBuilt" type="checkbox" name="House is not yet built" title="House is not yet built">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoNotYetBuilt">
<span class="caption-placeholder-m">Opcion 2</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-checkbox-group bgtransparent" id="moreInfo">
<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="checkbox-group" id="">
<ul class="column">
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoReform" type="checkbox" name="House needs a reform" title="House needs a reform">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoReform">
<span class="caption-placeholder-m">LA VIVIENDA NECESITA UNA REFORMA</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoNotYetBuilt" type="checkbox" name="House is not yet built" title="House is not yet built">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoNotYetBuilt">
<span class="caption-placeholder-m">LA CASA QUE QUIERO COMPRAR NO HA EMPEZADO A CONSTRUIRSE</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoSwitchHouseActiveMortgage" type="checkbox" name="I want to switch the house, but I have an active mortgage" title="I want to switch the house, but I have an active mortgage">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoSwitchHouseActiveMortgage">
<span class="caption-placeholder-m">QUIERO CAMBIAR DE CASA Y YA TENGO UNA HIPOTECA ACTIVA</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-checkbox-group bgaccentlight" id="moreInfo">
<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="checkbox-group" id="">
<ul class="column">
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoReform" type="checkbox" name="House needs a reform" title="House needs a reform">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoReform">
<span class="caption-placeholder-m">LA VIVIENDA NECESITA UNA REFORMA</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoNotYetBuilt" type="checkbox" name="House is not yet built" title="House is not yet built">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoNotYetBuilt">
<span class="caption-placeholder-m">LA CASA QUE QUIERO COMPRAR NO HA EMPEZADO A CONSTRUIRSE</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoSwitchHouseActiveMortgage" type="checkbox" name="I want to switch the house, but I have an active mortgage" title="I want to switch the house, but I have an active mortgage">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoSwitchHouseActiveMortgage">
<span class="caption-placeholder-m">QUIERO CAMBIAR DE CASA Y YA TENGO UNA HIPOTECA ACTIVA</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-checkbox-group error" id="moreInfo">
<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="checkbox-group" id="">
<ul class="column">
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoReform" type="checkbox" name="House needs a reform" title="House needs a reform">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoReform">
<span class="caption-placeholder-m">LA VIVIENDA NECESITA UNA REFORMA</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoNotYetBuilt" type="checkbox" name="House is not yet built" title="House is not yet built">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoNotYetBuilt">
<span class="caption-placeholder-m">LA CASA QUE QUIERO COMPRAR NO HA EMPEZADO A CONSTRUIRSE</span>
</label>
</div>
</li>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="moreInfoSwitchHouseActiveMortgage" type="checkbox" name="I want to switch the house, but I have an active mortgage" title="I want to switch the house, but I have an active mortgage">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
<label class="checkbox-label" for="moreInfoSwitchHouseActiveMortgage">
<span class="caption-placeholder-m">QUIERO CAMBIAR DE CASA Y YA TENGO UNA HIPOTECA ACTIVA</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-textarea" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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="textarea">
<textarea class="textarea-field
input-distinguisher_Mensaje
" id="randomInputId211" name="Mensaje" title="Mensaje" placeholder="Placeholder"></textarea>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-textarea disabled" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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="textarea">
<textarea class="textarea-field
input-distinguisher_Mensaje
" id="randomInputId211" name="Mensaje" title="Mensaje" placeholder="Placeholder"></textarea>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-textarea bgtransparent" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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="textarea">
<textarea class="textarea-field
input-distinguisher_Mensaje
" id="randomInputId211" name="Mensaje" title="Mensaje" placeholder="Placeholder"></textarea>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-textarea bgaccentlight" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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="textarea">
<textarea class="textarea-field
input-distinguisher_Mensaje
" id="randomInputId211" name="Mensaje" title="Mensaje" placeholder="Placeholder"></textarea>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-textarea error" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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="textarea">
<textarea class="textarea-field
input-distinguisher_Mensaje
" id="randomInputId211" name="Mensaje" title="Mensaje" placeholder="Placeholder"></textarea>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-search" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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> <input class="input
input-distinguisher_name
" id="input" type="text" name="" title="Name" autocomplete="" placeholder="Placeholder" />
<div class="form-search__icon">
<svg class="icon icon-search ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#search"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-search disabled" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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> <input class="input
input-distinguisher_name
" id="input" type="text" name="" title="Name" autocomplete="" placeholder="Placeholder" />
<div class="form-search__icon">
<svg class="icon icon-search ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#search"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-search bgtransparent" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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> <input class="input
input-distinguisher_name
" id="input" type="text" name="" title="Name" autocomplete="" placeholder="Placeholder" />
<div class="form-search__icon">
<svg class="icon icon-search ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#search"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-search bgaccentlight" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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> <input class="input
input-distinguisher_name
" id="input" type="text" name="" title="Name" autocomplete="" placeholder="Placeholder" />
<div class="form-search__icon">
<svg class="icon icon-search ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#search"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-search error" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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> <input class="input
input-distinguisher_name
" id="input" type="text" name="" title="Name" autocomplete="" placeholder="Placeholder" />
<div class="form-search__icon">
<svg class="icon icon-search ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#search"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-switch">
<div class="field-top fieldset form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-switch error">
<div class="field-top fieldset form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<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="switch3_1" type="radio" title="Switch 1" name="Switch group" value="1">
<label class="switch-label" for="switch3_1">
<div class="text-label-m">1</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="switch3_2" type="radio" title="Switch 2" name="Switch group" value="2">
<label class="switch-label" for="switch3_2">
<div class="text-label-m">2</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="switch3_3" type="radio" title="Switch 3" name="Switch group" value="3">
<label class="switch-label" for="switch3_3">
<div class="text-label-m">3</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
" id="switch3_4" type="radio" title="Switch 4" name="Switch group" value="4">
<label class="switch-label" for="switch3_4">
<div class="text-label-m">4</div>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-switch">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-switch-group" id="">
<ul class="switch-group">
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-switch">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-switch-group" id="">
<ul class="switch-group">
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
<div class="form-switch">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-switch-group" id="">
<ul class="switch-group">
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="inputs-example">
<div class="container">
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-fieldset form-fieldset }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-fieldset form-fieldset2 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-fieldset form-fieldset3 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-fieldset form-fieldset4 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-fieldset form-fieldset5 }}
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-select form-select }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-select form-select2 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-select form-select3 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-select form-select4 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-select form-select5 }}
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-input form-input }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-input form-input2 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-input form-input3 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-input form-input4 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-input form-input5 }}
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-range-slider form-range-slider }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-range-slider form-range-slider2 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-range-slider form-range-slider3 }}
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-radio-group form-radio-group }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-radio-group form-radio-group2 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-radio-group form-radio-group3 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-radio-group form-radio-group4 }}
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-checkbox-group form-checkbox-group }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-checkbox-group form-checkbox-group2 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-checkbox-group form-checkbox-group3 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-checkbox-group form-checkbox-group4 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-checkbox-group form-checkbox-group5 }}
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-textarea form-textarea }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-textarea form-textarea2 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-textarea form-textarea3 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-textarea form-textarea4 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-textarea form-textarea5 }}
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-search form-search }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-search form-search2 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-search form-search3 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-search form-search4 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-search form-search5 }}
</div>
</div>
<div class="row">
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-switch form-switch }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-switch form-switch2 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-switch form-switch3 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-switch form-switch4 }}
</div>
<div class="col-xs-6 col-ms-4 col-lg-3">
{{> @form-switch form-switch5 }}
</div>
</div>
</div>
</div>
{
"form-fieldset": {
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"input": {
"distinguisher": "name",
"id": "randomInputId211",
"type": "text",
"title": "Name",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-fieldset2": {
"isDisabled": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"input": {
"distinguisher": "name",
"id": "randomInputId211",
"type": "text",
"title": "Name",
"placeholder": "Placeholder",
"disabled": true
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-fieldset3": {
"isBGTransparent": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"input": {
"distinguisher": "name",
"id": "randomInputId211",
"type": "text",
"title": "Name",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-fieldset4": {
"isBGAccentLight": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"input": {
"distinguisher": "name",
"id": "randomInputId211",
"type": "text",
"title": "Name",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-fieldset5": {
"isError": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"input": {
"distinguisher": "name",
"id": "randomInputId211",
"type": "text",
"title": "Name",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-select": {
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"id": "where",
"select": {
"chosen-placeholder": "Placeholder",
"option": [
{
"id": "where1",
"select-name": "where",
"text": "Provincia 1"
},
{
"id": "where2",
"select-name": "where",
"text": "Provincia 2"
},
{
"id": "where3",
"select-name": "where",
"text": "Provincia 3"
}
]
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-select2": {
"isDisabled": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"id": "where_2",
"select": {
"disabled": true,
"chosen-placeholder": "Placeholder",
"option": [
{
"id": "where_21",
"select-name": "where",
"text": "Provincia 1"
},
{
"id": "where_22",
"select-name": "where",
"text": "Provincia 2"
},
{
"id": "where_23",
"select-name": "where",
"text": "Provincia 3"
}
]
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-select3": {
"isBGTransparent": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"id": "where_3",
"select": {
"chosen-placeholder": "Placeholder",
"option": [
{
"id": "where_31",
"select-name": "where",
"text": "Provincia 1"
},
{
"id": "where_32",
"select-name": "where",
"text": "Provincia 2"
},
{
"id": "where_33",
"select-name": "where",
"text": "Provincia 3"
}
]
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-select4": {
"isBGAccentLight": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"id": "where_4",
"select": {
"chosen-placeholder": "Placeholder",
"option": [
{
"id": "where_41",
"select-name": "where",
"text": "Provincia 1"
},
{
"id": "where_42",
"select-name": "where",
"text": "Provincia 2"
},
{
"id": "where_43",
"select-name": "where",
"text": "Provincia 3"
}
]
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-select5": {
"isError": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"id": "where_5",
"select": {
"chosen-placeholder": "Placeholder",
"option": [
{
"id": "where_51",
"select-name": "where",
"text": "Provincia 1"
},
{
"id": "where_52",
"select-name": "where",
"text": "Provincia 2"
},
{
"id": "wher_53",
"select-name": "where",
"text": "Provincia 3"
}
]
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-input": {
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"hasID": false,
"inputTitle": "Example form input",
"idComponent": "ingresosMes",
"inputValue": "5.000",
"symbol": {
"text": "€"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-input2": {
"isDisabled": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"disabled": true,
"hasID": false,
"inputTitle": "Example form input",
"idComponent": "ingresosMes",
"inputValue": "5.000",
"symbol": {
"text": "€"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-input3": {
"isBGTransparent": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"hasID": false,
"inputTitle": "Example form input",
"idComponent": "ingresosMes",
"inputValue": "5.000",
"symbol": {
"text": "€"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-input4": {
"isBGAccentLight": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"hasID": false,
"inputTitle": "Example form input",
"idComponent": "ingresosMes",
"inputValue": "5.000",
"symbol": {
"text": "€"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-input5": {
"isError": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"hasID": false,
"inputTitle": "Example form input",
"idComponent": "ingresosMes",
"inputValue": "5.000",
"symbol": {
"text": "€"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-range-slider": {
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"id": "ageRangeSlider",
"range-slider": {
"id": "ageRangeInput",
"inputTitle": "Cuál es tu edad",
"validationAttributes": "min='18' max='74' data-default='30'",
"symbol": {
"text": "años"
},
"legend-start": {
"text": "18 años"
},
"legend-end": {
"text": "74 años"
}
}
},
"form-range-slider2": {
"isBGTransparent": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"id": "netRangeSlider",
"range-slider": {
"id": "netRangeInput",
"inputTitle": "Cuál es tu edad",
"validationAttributes": "min='18' max='74' data-default='30'",
"symbol": {
"text": "años"
},
"legend-start": {
"text": "18 años"
},
"legend-end": {
"text": "74 años"
}
}
},
"form-range-slider3": {
"isBGAccentLight": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"id": "paymentsNumberRangeSlider",
"range-slider": {
"id": "paymentsNumberRangeInput",
"inputTitle": "Cuál es tu edad",
"validationAttributes": "min='18' max='74' data-default='30'",
"symbol": {
"text": "años"
},
"legend-start": {
"text": "18 años"
},
"legend-end": {
"text": "74 años"
}
}
},
"form-radio-group": {
"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"
}
}
},
"id": "reasonBuying",
"radio-group": {
"radio-group": [
{
"id": "reasonBuyingSecond",
"title": "Second Home",
"name": "reasonBuying",
"additionalAttributes": "checked",
"label": {
"text": "Sí",
"type": "-placeholder-m"
}
},
{
"id": "reasonBuyingRelocation",
"title": "Relocation",
"name": "reasonBuying",
"label": {
"text": "No",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-radio-group2": {
"Column": true,
"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"
}
}
},
"id": "reasonBuying",
"radio-group": {
"radio-group": [
{
"id": "reasonBuyingSecond",
"title": "Second Home",
"name": "reasonBuying",
"additionalAttributes": "checked",
"label": {
"text": "SECOND HOME",
"type": "-placeholder-m"
}
},
{
"id": "reasonBuyingRelocation",
"title": "Relocation",
"name": "reasonBuying",
"label": {
"text": "RELOCATION",
"type": "-placeholder-m"
}
},
{
"id": "reasonBuyingOther",
"title": "Other",
"name": "reasonBuying",
"label": {
"text": "OTHER",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-radio-group3": {
"isBGTransparent": true,
"Column": true,
"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"
}
}
},
"id": "reasonBuying",
"radio-group": {
"radio-group": [
{
"id": "reasonBuyingSecond",
"title": "Second Home",
"name": "reasonBuying",
"additionalAttributes": "checked",
"label": {
"text": "SECOND HOME",
"type": "-placeholder-m"
}
},
{
"id": "reasonBuyingRelocation",
"title": "Relocation",
"name": "reasonBuying",
"label": {
"text": "RELOCATION",
"type": "-placeholder-m"
}
},
{
"id": "reasonBuyingOther",
"title": "Other",
"name": "reasonBuying",
"label": {
"text": "OTHER",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-radio-group4": {
"isBGAccentLight": true,
"Column": true,
"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"
}
}
},
"id": "reasonBuying",
"radio-group": {
"radio-group": [
{
"id": "reasonBuyingSecond",
"title": "Second Home",
"name": "reasonBuying",
"additionalAttributes": "checked",
"label": {
"text": "SECOND HOME",
"type": "-placeholder-m"
}
},
{
"id": "reasonBuyingRelocation",
"title": "Relocation",
"name": "reasonBuying",
"label": {
"text": "RELOCATION",
"type": "-placeholder-m"
}
},
{
"id": "reasonBuyingOther",
"title": "Other",
"name": "reasonBuying",
"label": {
"text": "OTHER",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-checkbox-group": {
"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"
}
}
},
"id": "moreInfo",
"checkbox-group": {
"isColumn": true,
"checkbox-group": [
{
"id": "moreInfoReform",
"title": "House needs a reform",
"name": "More info",
"label": {
"text": "LA VIVIENDA NECESITA UNA REFORMA",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoNotYetBuilt",
"title": "House is not yet built",
"name": "More info",
"label": {
"text": "LA CASA QUE QUIERO COMPRAR NO HA EMPEZADO A CONSTRUIRSE",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoSwitchHouseActiveMortgage",
"title": "I want to switch the house, but I have an active mortgage",
"name": "More info",
"label": {
"text": "QUIERO CAMBIAR DE CASA Y YA TENGO UNA HIPOTECA ACTIVA",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
},
"helper-text": {
"text": "Helper text opcional"
}
}
},
"form-checkbox-group2": {
"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"
}
}
},
"id": "moreInfo",
"checkbox-group": {
"checkbox-group": [
{
"id": "moreInfoReform",
"title": "House needs a reform",
"name": "More info",
"label": {
"text": "Opcion 1",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoNotYetBuilt",
"title": "House is not yet built",
"name": "More info",
"label": {
"text": "Opcion 2",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
},
"helper-text": {
"text": "Helper text opcional"
}
}
},
"form-checkbox-group3": {
"isBGTransparent": true,
"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"
}
}
},
"id": "moreInfo",
"checkbox-group": {
"isColumn": true,
"checkbox-group": [
{
"id": "moreInfoReform",
"title": "House needs a reform",
"name": "More info",
"label": {
"text": "LA VIVIENDA NECESITA UNA REFORMA",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoNotYetBuilt",
"title": "House is not yet built",
"name": "More info",
"label": {
"text": "LA CASA QUE QUIERO COMPRAR NO HA EMPEZADO A CONSTRUIRSE",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoSwitchHouseActiveMortgage",
"title": "I want to switch the house, but I have an active mortgage",
"name": "More info",
"label": {
"text": "QUIERO CAMBIAR DE CASA Y YA TENGO UNA HIPOTECA ACTIVA",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
},
"helper-text": {
"text": "Helper text opcional"
}
}
},
"form-checkbox-group4": {
"isBGAccentLight": true,
"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"
}
}
},
"id": "moreInfo",
"checkbox-group": {
"isColumn": true,
"checkbox-group": [
{
"id": "moreInfoReform",
"title": "House needs a reform",
"name": "More info",
"label": {
"text": "LA VIVIENDA NECESITA UNA REFORMA",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoNotYetBuilt",
"title": "House is not yet built",
"name": "More info",
"label": {
"text": "LA CASA QUE QUIERO COMPRAR NO HA EMPEZADO A CONSTRUIRSE",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoSwitchHouseActiveMortgage",
"title": "I want to switch the house, but I have an active mortgage",
"name": "More info",
"label": {
"text": "QUIERO CAMBIAR DE CASA Y YA TENGO UNA HIPOTECA ACTIVA",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
},
"helper-text": {
"text": "Helper text opcional"
}
}
},
"form-checkbox-group5": {
"isError": true,
"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"
}
}
},
"id": "moreInfo",
"checkbox-group": {
"isColumn": true,
"checkbox-group": [
{
"id": "moreInfoReform",
"title": "House needs a reform",
"name": "More info",
"label": {
"text": "LA VIVIENDA NECESITA UNA REFORMA",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoNotYetBuilt",
"title": "House is not yet built",
"name": "More info",
"label": {
"text": "LA CASA QUE QUIERO COMPRAR NO HA EMPEZADO A CONSTRUIRSE",
"type": "-placeholder-m"
}
},
{
"id": "moreInfoSwitchHouseActiveMortgage",
"title": "I want to switch the house, but I have an active mortgage",
"name": "More info",
"label": {
"text": "QUIERO CAMBIAR DE CASA Y YA TENGO UNA HIPOTECA ACTIVA",
"type": "-placeholder-m"
}
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
},
"helper-text": {
"text": "Helper text opcional"
}
}
},
"form-textarea": {
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"textarea": {
"distinguisher": "Mensaje",
"id": "randomInputId211",
"type": "text",
"title": "Mensaje",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-textarea2": {
"isDisabled": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"textarea": {
"distinguisher": "Mensaje",
"id": "randomInputId211",
"type": "text",
"title": "Mensaje",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-textarea3": {
"isBGTransparent": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"textarea": {
"distinguisher": "Mensaje",
"id": "randomInputId211",
"type": "text",
"title": "Mensaje",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-textarea4": {
"isBGAccentLight": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"textarea": {
"distinguisher": "Mensaje",
"id": "randomInputId211",
"type": "text",
"title": "Mensaje",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-textarea5": {
"isError": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"textarea": {
"distinguisher": "Mensaje",
"id": "randomInputId211",
"type": "text",
"title": "Mensaje",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-search": {
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"input": {
"distinguisher": "name",
"id": "input",
"type": "text",
"title": "Name",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-search2": {
"isDisabled": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"input": {
"distinguisher": "name",
"id": "input",
"type": "text",
"title": "Name",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-search3": {
"isBGTransparent": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"input": {
"distinguisher": "name",
"id": "input",
"type": "text",
"title": "Name",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-search4": {
"isBGAccentLight": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"input": {
"distinguisher": "name",
"id": "input",
"type": "text",
"title": "Name",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-search5": {
"isError": true,
"field-top": {
"label": {
"text": "Field Text"
},
"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"
}
}
},
"input": {
"distinguisher": "name",
"id": "input",
"type": "text",
"title": "Name",
"placeholder": "Placeholder"
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-switch": {
"field-top": {
"fieldset": true,
"label": {
"text": "Field Text"
},
"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"
}
}
]
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"form-switch2": {
"isError": true,
"field-top": {
"fieldset": true,
"label": {
"text": "Field Text"
},
"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": "switch3_1",
"title": "Switch 1",
"name": "Switch group",
"label": {
"text": "1"
}
},
{
"id": "switch3_2",
"title": "Switch 2",
"name": "Switch group",
"label": {
"text": "2"
}
},
{
"id": "switch3_3",
"title": "Switch 3",
"name": "Switch group",
"label": {
"text": "3"
}
},
{
"id": "switch3_4",
"title": "Switch 4",
"name": "Switch group",
"label": {
"text": "4"
}
}
]
},
"field-bottom": {
"helper-text": {
"text": "Helper text opcional"
},
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"isHipotecas": true
}
.inputs-example {
background-color: rgba(0,99,91,0.05);
}
No notes defined.