Set the checkbox input element's checked attribute to true.
If there's a message, it will be shown automatically. If another radio is selected, it'll be hidden again.
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotSelectLoader" class="sds-spotSelect__radioInput sr-only" disabled value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem -isLoading" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotSelectLoader">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotSelectLoader">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}spotSelect {{ namespace }}showCustomIndicatorHover {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<input type="{{ checkItemType }}" id="{{ spotSelectID }}" class="{% if checkItemType === "radio" %}{{ namespace }}spotSelect__radioInput{% else %}{{ namespace }}spotSelect__checkboxInput{% endif %} sr-only{% if error %} is-invalid{% endif %}"{% if checked %} checked{% endif%}{% if disabled %} disabled{% endif %} value="{{ inputValue }}" name="{{ inputName }}"{% if collapse %} data-toggle='collapse' data-target='#{{ collapse }}'{% endif %}>
<div data-scope-wrapper="box" data-scope="flat" class="{{ namespace }}spotSelect__body">
<div class="{{ namespace }}spotSelect__content">
{% if loading %}
{% set checkItemClasses = [namespace+"spotSelect__checkItem","-isLoading"] %}
{% else %}
{% set checkItemClasses = [namespace+"spotSelect__checkItem"] %}
{% endif %}
{% if checkItemType === "radio" %}
{% render "@radio-dot--no-input",{
classes: checkItemClasses
},true %}
{% else %}
{% render "@checkbox-dot--no-input",{
classes: checkItemClasses
},true %}
{% endif %}
{% if internalResource %}
{% set mediaPath = (mediaPath+img) | path %}
{% else %}
{% set mediaPath = img %}
{% endif %}
{% if roundedImg %}
<div class="{{ namespace }}spotSelect__img centeredBgi"
style="background-image: url({{ mediaPath }})"></div>
{% elseif img %}
<img src="{{ mediaPath }}" alt="">
{% endif %}
<div class="{{ namespace }}spotSelect__inner {{ namespace }}stackMd">
<div class="{{ namespace }}spotSelect__text">
{% if title %}
<div class="{{ namespace }}spotSelect__title">
<div class="{{ namespace }}textSemiBold">
<label class="{{ namespace }}spotSelect__checkItemLabel"
for="{{ spotSelectID }}">{{ title }}</label>
</div>
{% if icon %}
<span class="{{ namespace }}icon {{ namespace }}{{ icon }}"></span>
{% endif %}
</div>
{% endif %}
{% if text %}
<p><label class="{{ namespace }}spotSelect__checkItemLabel"
for="{{ spotSelectID }}">{{ text }}</label></p>
{% endif %}
</div>
</div>
{% if infoDot %}
<div class="{{ namespace }}aboveClickArea d-inline-flex">
{% render "@info-dot--modal",{
target: spotSelectModalTarget
},true %}
</div>
{% endif %}
</div>
{% if message %}
<div class="{{ namespace }}spotSelect__hiddenContent">
<div class="{{ namespace }}spotSelect__hiddenContentInner">
{% render '@message--options', {text: "Veuillez noter, le prêt logement n’est élligible que pour l’un des types de projet suivant :"}, true %}
</div>
</div>
{% endif %}
</div>
{% if checkItemType === "checkbox" %}
<div class="invalid-feedback">Error message</div>
{% endif %}
</div>
$spot-select-padding-x: map-deep-get($token-spacer-inset-map, "md");
$spot-select-padding-y: map-deep-get($token-spacer-inset-map, "sm");
$spot-select-border-radius: map-deep-get($token-radius-map, "16");
$spot-select-padding-left: ($checkbox-dot-dimensions-global + ($spot-select-padding-x*2));
$spot-select-hidden-content-negative-offset: -$spot-select-padding-left + $spot-select-padding-x;
.#{$namespace}spotSelect {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* variables specific to current element */
/* properties of current element + media queries */
position: relative;
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
IMG {
display: none;
@include media-breakpoint-up(sm){
display: block;
}
width: map-deep-get($token-sizes-unit-map, "40");
height: map-deep-get($token-sizes-unit-map, "40");
@include media-breakpoint-up(lg) {
width: map-deep-get($token-sizes-unit-map, "64");
height: map-deep-get($token-sizes-unit-map, "64");
}
object-fit: cover;
}
// spotSelect__body
&__body {
display: flex;
flex-direction: column;
justify-content: space-between;
border: $border-width*2 solid;
@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
@include custom-prop-fallback("border-color","sys-color-border-primary-moderate");
// same as body color
@include custom-prop-fallback("color","sys-color-text-primary-contrast");
padding: $spot-select-padding-y $spot-select-padding-x $spot-select-padding-y $spot-select-padding-left;
border-radius: map-deep-get($token-radius-map, "16");
min-height: map-deep-get($token-sizes-unit-map, "56");
height: 100%; /* if spot selects are in stretch container */
}
&__content {
display: flex;
align-items: center;
flex-grow: 1;
@include spacer-component-inline("md");
position: relative;
@include media-breakpoint-up(lg) {
align-items: center;
}
}
&__checkItemLabel {
&::after {
content: "";
position: absolute;
z-index: z("zero");
top: -$spot-select-padding-y;
left: -$spot-select-padding-left;
right: -$spot-select-padding-x;
bottom: -$spot-select-padding-y;
cursor: pointer;
border-radius: $spot-select-border-radius;
}
}
&__title {
display: flex;
align-items: center;
@include spacer-component-inline("sm");
padding-right: map-deep-get($token-spacer-inset-map, "xl");
> * {
font-family: map-deep-get($token-font-family-map, "text");
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
color: inherit;
}
.#{$namespace}icon {
display: inline-block;
vertical-align: middle;
&::before {
font-size: 1.25em;
}
}
}
&__inner {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: $spot-select-padding-y;
padding-bottom: $spot-select-padding-y;
}
&__hiddenContent,
&__message {
display: none;
margin-left: $spot-select-hidden-content-negative-offset;
}
&__radioInput:checked ~ * &__message,
&__radioInput:checked ~ * &__hiddenContent {
display: block;
}
&__hiddenContentInner,
&__messageInner {
padding-top: map-deep-get($token-spacer-inset-map, "md");
}
&__radioInput,
&__checkboxInput,
&__checkItem {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -(($checkbox-dot-dimensions-global + ($spot-select-padding-x)));
}
&__radioInput,
&__checkboxInput {
left: $spot-select-padding-x;
}
&__radioInput,
&__checkboxInput {
&:checked ~ #{$self}__body {
position: relative;
z-index: z("low");
@include custom-prop-fallback("border-color", "comp-radio-checked-border-color")
}
&.-isDisabled,
&[disabled] ~ #{$self}__body, &:disabled ~ #{$self}__body {
pointer-events: none;
@include custom-prop-fallback("border-color", "comp-checkbox-disabled-border-color");
@include custom-prop-fallback("color", "comp-checkbox-disabled-border-color");
}
&.-isDisabled,
&[disabled] ~ * #{$self}__img, &:disabled ~ * #{$self}__img,
&[disabled] ~ * IMG, &:disabled ~ * IMG {
filter: grayscale(1);
}
&.is-invalid ~ #{$self}__body {
position: relative;
z-index: z("low");
@include custom-prop-fallback("background-color", "sys-color-background-status-danger-6");
@include custom-prop-fallback("border-color", "sys-color-text-status-danger-vivid");
@include custom-prop-fallback("color", "sys-color-text-status-danger-vivid");
}
}
&__radioInput {
&:active ~ * #{$self}__checkItem,
&:focus-visible ~ * #{$self}__checkItem {
@include radioInputFocused();
}
&:checked ~ * #{$self}__checkItem,
&.-active {
@include radioInputChecked();
}
&.-isDisabled,
&[disabled] ~ * #{$self}__checkItem, &:disabled ~ * #{$self}__checkItem {
@include radioInputDisabled();
}
&.-isDisabled:checked,
&[disabled]:checked ~ * #{$self}__checkItem, &:disabled:checked ~ * #{$self}__checkItem {
@include radioInputDisabledChecked();
}
}
&__checkboxInput {
&:checked ~ * #{$self}__checkItem,
&.-isActive {
@include checkboxInputChecked();
}
&:active ~ * #{$self}__checkItem,
&:focus-visible ~ * #{$self}__checkItem {
@include checkboxFocused();
}
&.-isDisabled,
&[disabled] ~ * #{$self}__checkItem, &:disabled ~ * #{$self}__checkItem {
@include checkboxInputDisabled();
}
&.-isDisabled:checked,
&[disabled]:checked ~ * #{$self}__checkItem, &:disabled:checked ~ * #{$self}__checkItem {
@include checkboxInputDisabledChecked();
}
}
/* modifiers */
// spotSelect -roundedImg
&.-roundedImg {
display: none;
@include media-breakpoint-up(sm){
display: block;
}
#{$self}__img {
flex-shrink: 0;
width: map-deep-get($token-sizes-unit-map, "40");
height: map-deep-get($token-sizes-unit-map, "40");
border-radius: map-deep-get($token-radius-map, "circle");
@include media-breakpoint-up(lg) {
width: map-deep-get($token-sizes-unit-map, "64");
height: map-deep-get($token-sizes-unit-map, "64");
}
}
}
/* @TODO Deprecated remove when safe to do so */
&.-centered {
#{$self}__radioInput,
#{$self}__checkItem {
top: $spot-select-padding-y * 2;
right: $spot-select-padding-x;
left: auto;
margin-right: 0 !important;
transform: none;
}
#{$self}__checkItemLabel {
&::after {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
#{$self}__body {
padding: $spot-select-padding-y $spot-select-padding-x !important;
position: relative;
}
#{$self}__content {
display: flex;
justify-content: center;
align-items: center;
@include spacer-component-inline("sm");
position: static;
@include media-breakpoint-up(lg) {
@include spacer-component-stack("md");
flex-direction: column;
padding-top: map-deep-get($token-spacer-unit-map, "24");
}
IMG {
@include media-breakpoint-up(lg) {
margin-right: 0;
margin-top: 0;
width: map-deep-get($token-sizes-unit-map, "80");
height: map-deep-get($token-sizes-unit-map, "80");
}
}
}
}
&.-noPic {
#{$self}__content {
align-items: flex-start;
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}