<div class="bux-radio">
<fieldset class="bux-radio__fieldset" id="bux-radio__radio-1934798191" role="radiogroup" aria-describedby=" bux-radio__error-message bux-checkbox__helper-text-1934798191" aria-invalid="true">
<legend class="bux-radio__legend">Form Input Label</legend>
<span class="bux-radio__helper-text" id="bux-radio__helper-text-1934798191">Helper Text</span>
<div class="bux-radio__input-spacer">
<div class="bux-radio__option bux-radio__option--error">
<input type="radio" id="bux-radio__option-390107254" name="radio-1934798191">
<label for="bux-radio__option-390107254">Item 1</label>
</div>
<div class="bux-radio__option bux-radio__option--error">
<input type="radio" id="bux-radio__option-324115438" name="radio-1934798191">
<label for="bux-radio__option-324115438">Item 2</label>
</div>
<div class="bux-radio__option bux-radio__option--error">
<input type="radio" id="bux-radio__option-1749560280" name="radio-1934798191">
<label for="bux-radio__option-1749560280">Item 3</label>
</div>
</div>
<span class="bux-radio__error-message" id="bux-radio__error-message-1934798191">Error Helper Text</span>
</fieldset>
</div>
{#
Radio Button
Available variables:
- required: Boolean. Set to true to require form element.
- modifier: Sets the variant of the form item. Allowed values: null,
error,disabled.
- legend: String for the form legend.
- helper_text: String for the form helper text.
- items: Array containing the form items.
- item.text: Display text for the form item.
- error_helper_text:Content for the error helper text.
#}
{% set random_seed = random() %}
{% set radio_id = "radio-" ~ random_seed %}
<div class="bux-radio">
<fieldset class="bux-radio__fieldset" id="bux-radio__{{ radio_id }}" role="radiogroup" aria-describedby="{% if "error" in modifier %} bux-radio__error-message {% endif %}bux-checkbox__helper-text-{{ random_seed }}"
{% if required %} required {% endif %}
{% if "error" in modifier %} aria-invalid="true" {% endif %}>
<legend class="bux-radio__legend">{{ legend }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</legend>
<span class="bux-radio__helper-text" id="bux-radio__helper-text-{{ random_seed }}">{{ helper_text }}</span>
<div class="bux-radio__input-spacer">
{% for item in items %}
{% set random_seed_option = random() %}
{% set radio_option_id = "bux-radio__option-" ~ random_seed_option %}
<div class="bux-radio__option{% if modifier %} bux-radio__option--{{ modifier }}{% endif %}">
<input type="radio" id="{{ radio_option_id }}" name="{{ radio_id }}" {% if "disabled" in modifier %} disabled {% endif %}>
<label for="{{ radio_option_id }}">{{ item.text }}</label>
</div>
{% endfor %}
</div>
{% if "error" in modifier %}
<span class="bux-radio__error-message" id="bux-radio__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
{% endif %}
</fieldset>
</div>
modifier: error
legend: Form Input Label
helper_text: Helper Text
error_helper_text: Error Helper Text
items:
- text: Item 1
- text: Item 2
- text: Item 3
.bux-radio {
@include form-element;
&__option {
display: grid;
grid-template-columns: 18px auto;
gap: 8px;
label {
margin-top: 2px;
}
& + & {
margin-top: $sp-8;
}
input[type="radio"] {
appearance: none;
background-color: #fff;
margin: 0;
font: inherit;
color: $gray-dark-80;
width: 20px;
height: 20px;
border: 2px solid $gray-dark-80;
border-radius: 50%;
transform: translateY(2.5px);
display: grid;
place-content: center;
&:before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
transform: scale(0);
transition: 120ms transform ease-in-out;
background-color: $scarlet;
}
&:checked:before {
transform: scale(1);
}
&:checked {
border-color: $scarlet;
}
&:focus {
outline: 2px solid $focus!important;
}
}
&--disabled input[type="radio"] {
border: 2px solid $gray-light-40;
background-color: $gray-light-80;
}
&--disabled label {
color: $gray-light-20;
}
&--error > input[type="radio"] {
background: #ffeff2;
border-color: $scarlet;
}
}
&__error-message {
@include form-error-message;
margin-top: 5px;
}
}
No notes defined.