<label id="checkbox-wrapper" class="checkbox" for="checkbox">
<input class="checkbox__input" id="checkbox" name="checkbox" value="1" aria-required="false" aria-checked="false" type="checkbox" />
<span class="checkbox__box">
<svg class="icon icon--check checkbox__box-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#check"></use>
</svg> </span>
<span class="checkbox__text">This is a checkbox <a class="link" data-link-type="external" href="https://example.com" rel="noopener noreferrer" target="_blank"><span class="link__icon"><svg class="icon icon--arrow-up-right-from-square" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-up-right-from-square"></use>
</svg></span><span class="link__text u-underline">with link</span></a></span>
</label>
{% set id = id ??? html_id('checkbox') %}
{% set required = required ?? false %}
{% set invalid = invalid ?? false %}
{% set disabled = disabled ?? false %}
{% set checked = checked ?? false %}
{% set descriptionId = descriptionId ?? '' %}
{% set errorId = errorId ?? '' %}
{% set describedBy = html_classes(errorId, descriptionId) | trim | default(false) -%}
{% set invisibleLabel = invisibleLabel ?? false %}
<label {{ html_attributes({
id: 'wrapper' | namespaceInputId(id),
class: 'checkbox',
for: id,
}, attrs ?? {}) }}>
<input {{ html_attributes({
class: 'checkbox__input',
id: id,
name: name,
value: value ?? null,
checked: checked,
required: required,
disabled: disabled,
'aria-required': required ? 'true' : 'false',
'aria-checked': checked ? 'true' : 'false',
'aria-invalid': invalid ? 'true' : null,
'aria-describedby': describedBy,
type: 'checkbox',
'data-checkbox-check-all': checkAll ?? false,
}, inputAttrs ?? {}) }} />
<span class="checkbox__box">
{% include '@icon' with {
icon: 'check',
class: 'checkbox__box-icon',
} only %}
</span>
<span class="checkbox__text{{ invisibleLabel ? ' u-hidden-visually' }}">
{{- text | componentize(inline_only=true) -}}
</span>
</label>
{
"id": "checkbox",
"name": "checkbox",
"value": 1,
"text": "This is a checkbox <a href=\"https://example.com\">with link</a>"
}
@use 'a11y';
.checkbox {
--_checkbox-size: var(--checkbox-size, 2.8rem);
cursor: pointer;
display: flex;
gap: 1.5rem;
inline-size: 100%;
&:has([disabled]) {
cursor: default;
filter: grayscale(1);
opacity: 0.2;
}
&:has(:focus-visible:not(:any-link)) {
@include a11y.outline();
}
}
.checkbox__input {
opacity: 0;
pointer-events: none;
position: absolute;
z-index: -1;
}
.checkbox__box {
align-items: center;
background-color: var(--checkbox-background-color, var(--color-white));
block-size: var(--_checkbox-size);
border-color: var(--checkbox-border-color, var(--color-gray-200));
border-radius: var(--checkbox-border-radius, 50%);
border-style: var(--checkbox-border-style, solid);
border-width: var(--checkbox-border-width, 1px);
color: var(--checkbox-color, transparent);
display: flex;
flex-direction: column;
flex-shrink: 0;
font-size: calc(var(--_checkbox-size) / 2);
inline-size: var(--_checkbox-size);
justify-content: center;
transition-property: background-color, border-color, color;
user-select: none;
.checkbox__input:checked ~ & {
background-color: var(--checkbox-background-color--checked, var(--color-white));
border-color: var(--checkbox-border-color--checked, var(--color-gray-200));
color: var(--checkbox-color--checked, var(--color-steel-800));
}
}
.checkbox__text {
color: inherit;
font-size: inherit;
line-height: var(--checkbox-line-height, var(--line-height-wide));
margin-block-start: calc((var(--_checkbox-size) - 1lh) / 2);
text-align: start;
}
import { on } from 'delegated-events';
on('change', '.checkbox input', (event) => {
const { currentTarget: $checkbox } = event;
if ($checkbox.form) {
const $$neighbour = $checkbox.form.elements.namedItem($checkbox.name);
if ($$neighbour instanceof RadioNodeList) {
$$neighbour.forEach(($neighbour) => {
if (!($neighbour instanceof HTMLInputElement)) {
return;
}
if ($checkbox.dataset.checkboxCheckAll !== undefined) {
$neighbour.checked = $checkbox.checked;
} else if ($neighbour.dataset.checkboxCheckAll !== undefined) {
$neighbour.checked = Array.from($$neighbour)
.filter(($n) => $n instanceof HTMLInputElement)
.every(($n) => ($n !== $neighbour ? $n.checked : true));
}
});
}
}
});
No notes defined.