<label class="checkbox" id="checkbox-wrap" for="checkbox">
<input class="checkbox__input" id="checkbox" name="checkbox" value="1" aria-required="false" aria-checked="false" type="checkbox" />
<span class="checkbox__icon">
<svg class="icon icon--check-alt" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#check-alt"></use>
</svg> </span>
<span class="checkbox__label">Das ist eine Checkbox</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) -%}
<label {{ html_attributes({
class: {
'checkbox': true,
'checkbox--disabled': disabled,
'checkbox--invalid': invalid,
},
id: 'wrap' | namespaceInputId(id),
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',
}, inputAttrs ?? {}) }} />
<span class="checkbox__icon">
{% include '@icon' with {
icon: 'check-alt',
} only %}
</span>
<span class="checkbox__label">
{{- label | componentize -}}
{%- if required|default -%}
<span aria-hidden="true" class="checkbox__required" title="{{ 'Required' | t('site') }}">*</span>
{%- endif -%}
</span>
</label>
{
"id": "checkbox",
"name": "checkbox",
"value": 1,
"label": "Das ist eine Checkbox"
}
:root {
--checkbox-border-color-invalid: var(--error-color);
--checkbox-border-color: var(--form-color);
--checkbox-border-radius: var(--form-border-radius);
--checkbox-border-width: 2px;
--checkbox-color-invalid: var(--required-color);
--checkbox-focus-outline-color: var(--form-focus-color);
--checkbox-focus-outline-width: 3px;
--checkbox-font-size: var(--font-size-default);
--checkbox-gap: 1.5rem;
--checkbox-icon-color: var(--form-color);
--checkbox-line-height: 2.2rem;
--checkbox-required-color: var(--required-color);
--checkbox-size: 2.8rem;
--checkbox-text-color: var(--text-color);
}
.checkbox {
cursor: pointer;
display: flex;
gap: var(--checkbox-gap);
position: relative;
}
.checkbox--disabled {
cursor: default;
opacity: 0.5;
}
.checkbox__input {
opacity: 0;
pointer-events: none;
position: absolute;
z-index: -1;
&:focus {
outline: 0;
}
}
.checkbox__icon {
--focus-outline-offset: 0;
--focus-outline-width: var(--checkbox-focus-outline-width);
--focus-outline-color: var(--checkbox-focus-outline-color);
align-items: center;
block-size: var(--checkbox-size);
border: var(--checkbox-border-width) solid var(--checkbox-border-color);
border-radius: var(--checkbox-border-radius);
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: border-color, color;
user-select: none;
.checkbox__input[aria-invalid='true'] ~ & {
border-color: var(--checkbox-border-color-invalid);
}
.checkbox__input:checked ~ & {
color: var(--checkbox-icon-color);
}
.checkbox__input:focus ~ & {
border-color: var(--checkbox-border-color);
@include use-focus-outline();
}
}
.checkbox__label {
color: var(--checkbox-text-color);
font-size: var(--checkbox-font-size);
line-height: var(--checkbox-line-height);
margin-block-start: calc((var(--checkbox-size) - var(--checkbox-line-height)) / 2);
text-align: start;
}
.checkbox__required {
color: var(--checkbox-required-color);
cursor: help;
display: inline-block;
font-weight: var(--font-weight-bold);
margin-inline-start: 0.5rem;
}
No notes defined.