<label class="radio" id="radio" for="radio-input">
<input class="radio__input" id="radio-input" name="radio" value="1" aria-required="false" aria-checked="false" aria-invalid="true" type="radio" />
<div class="radio__marker"></div>
<span class="radio__label">Das ist ein Radio-Button</span>
</label>
{% set id = id ??? html_id('radio') %}
{% set required = required ?? false %}
{% set invalid = invalid ?? false %}
{% set disabled = disabled ?? false %}
{% set checked = checked ?? false -%}
<label {{ html_attributes({
class: {
'radio': true,
'radio--disabled': disabled ?? false,
},
id: id,
for: 'input' | namespaceInputId(id),
}, attrs ?? {}) }}>
<input {{ html_attributes({
class: 'radio__input',
id: 'input' | namespaceInputId(id),
name: name,
value: value,
checked: checked,
required: required,
disabled: disabled,
'aria-required': required ? 'true' : 'false',
'aria-checked': checked ? 'true' : 'false',
'aria-invalid': invalid ? 'true' : null,
type: 'radio',
}, inputAttrs ?? {}) }} />
<div class="radio__marker"></div>
<span class="radio__label">
{{- label | componentize -}}
</span>
</label>
{
"id": "radio",
"name": "radio",
"value": 1,
"label": "Das ist ein Radio-Button",
"invalid": true
}
:root {
--radio-border-color-invalid: var(--error-color);
--radio-border-color: var(--form-color);
--radio-border-width: 2px;
--radio-focus-outline-color: var(--form-focus-color);
--radio-focus-outline-width: 3px;
--radio-font-size: 1.6rem;
--radio-gap: 1.5rem;
--radio-line-height: 2.2rem;
--radio-marker-color: var(--form-color);
--radio-size: 2.8rem;
--radio-text-color: var(--text-color);
}
.radio {
cursor: pointer;
display: flex;
gap: var(--radio-gap);
position: relative;
}
.radio--disabled {
cursor: default;
opacity: 0.5;
}
.radio__input {
opacity: 0;
pointer-events: none;
position: absolute;
z-index: -1;
&:focus {
outline: 0;
}
}
.radio__marker {
--focus-outline-offset: 0;
--focus-outline-width: var(--radio-focus-outline-width);
--focus-outline-color: var(--radio-focus-outline-color);
align-items: center;
block-size: var(--radio-size);
border: var(--radio-border-width) solid var(--radio-border-color);
border-radius: 50%;
color: transparent;
display: flex;
flex-direction: column;
flex-shrink: 0;
inline-size: var(--radio-size);
justify-content: center;
transition-property: border-color;
user-select: none;
.radio__input[aria-invalid='true'] ~ & {
border-color: var(--radio-border-color-invalid);
}
.radio__input:focus ~ & {
@include use-focus-outline();
}
&::before {
background-color: var(--radio-marker-color);
block-size: calc(var(--radio-size) / 2);
border-radius: 50%;
content: '';
display: block;
inline-size: calc(var(--radio-size) / 2);
opacity: 0;
transition-property: opacity;
}
.radio__input:checked ~ &::before {
opacity: 1;
}
}
.radio__label {
color: var(--radio-text-color);
font-size: var(--radio-font-size);
line-height: var(--radio-line-height);
margin-block-start: calc((var(--radio-size) - var(--radio-line-height)) / 2);
text-align: start;
}
No notes defined.