<!-- Primary -->
<div class="bux-checkbox">
<fieldset id="bux-checkbox__checkbox-8218371" class="bux-checkbox__fieldset" aria-describedby="bux-checkbox__helper-text-8218371">
<legend class="bux-checkbox__legend">
Form Input Label
</legend>
<span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-8218371">
Helper Text
</span>
<div class="bux-checkbox__input-spacer">
<div class="bux-checkbox__option">
<input type="checkbox" id="bux-checkbox__option-1403209784" name="checkbox-default" />
<label for="bux-checkbox__option-1403209784">Item 1</label>
</div>
<div class="bux-checkbox__option">
<input type="checkbox" id="bux-checkbox__option-992542929" name="checkbox-default" />
<label for="bux-checkbox__option-992542929">Item 2</label>
</div>
<div class="bux-checkbox__option">
<input type="checkbox" id="bux-checkbox__option-1061095599" name="checkbox-default" />
<label for="bux-checkbox__option-1061095599">Item 3</label>
</div>
</div>
</fieldset>
</div>
<!-- Required -->
<div class="bux-checkbox">
<fieldset id="bux-checkbox__checkbox-1341423676" class="bux-checkbox__fieldset" aria-describedby="bux-checkbox__helper-text-1341423676" required>
<legend class="bux-checkbox__legend">
Form Input Label
<span class="bux-checkbox__required">
(required)
</span>
</legend>
<span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-1341423676">
Helper Text
</span>
<div class="bux-checkbox__input-spacer">
<div class="bux-checkbox__option">
<input type="checkbox" id="bux-checkbox__option-589302977" name="checkbox-required" />
<label for="bux-checkbox__option-589302977">Item 1</label>
</div>
<div class="bux-checkbox__option">
<input type="checkbox" id="bux-checkbox__option-1605162086" name="checkbox-required" />
<label for="bux-checkbox__option-1605162086">Item 2</label>
</div>
<div class="bux-checkbox__option">
<input type="checkbox" id="bux-checkbox__option-1583601221" name="checkbox-required" />
<label for="bux-checkbox__option-1583601221">Item 3</label>
</div>
</div>
</fieldset>
</div>
<!-- Disabled -->
<div class="bux-checkbox">
<fieldset id="bux-checkbox__checkbox-1957976252" class="bux-checkbox__fieldset bux-checkbox__fieldset--disabled" aria-describedby="bux-checkbox__helper-text-1957976252" disabled>
<legend class="bux-checkbox__legend">
Form Input Label
</legend>
<span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-1957976252">
Helper Text
</span>
<div class="bux-checkbox__input-spacer">
<div class="bux-checkbox__option bux-checkbox__option--disabled">
<input type="checkbox" id="bux-checkbox__option-136526977" name="checkbox-disabled" />
<label for="bux-checkbox__option-136526977">Item 1</label>
</div>
<div class="bux-checkbox__option bux-checkbox__option--disabled">
<input type="checkbox" id="bux-checkbox__option-2128335589" name="checkbox-disabled" />
<label for="bux-checkbox__option-2128335589">Item 2</label>
</div>
<div class="bux-checkbox__option bux-checkbox__option--disabled">
<input type="checkbox" id="bux-checkbox__option-434195166" name="checkbox-disabled" />
<label for="bux-checkbox__option-434195166">Item 3</label>
</div>
</div>
</fieldset>
</div>
<!-- Error -->
<div class="bux-checkbox">
<fieldset id="bux-checkbox__checkbox-1847001012" class="bux-checkbox__fieldset bux-checkbox__fieldset--error" aria-describedby="bux-checkbox__error-message-1847001012 bux-checkbox__helper-text-1847001012" aria-invalid="true">
<legend class="bux-checkbox__legend">
Form Input Label
</legend>
<span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-1847001012">
Helper Text
</span>
<span class="bux-checkbox__error-message" id="bux-checkbox__error-message-1847001012">
Error Helper Text
</span>
<div class="bux-checkbox__input-spacer">
<div class="bux-checkbox__option bux-checkbox__option--error">
<input type="checkbox" id="bux-checkbox__option-1536332911" name="checkbox-error" />
<label for="bux-checkbox__option-1536332911">Item 1</label>
</div>
<div class="bux-checkbox__option bux-checkbox__option--error">
<input type="checkbox" id="bux-checkbox__option-1403446988" name="checkbox-error" />
<label for="bux-checkbox__option-1403446988">Item 2</label>
</div>
<div class="bux-checkbox__option bux-checkbox__option--error">
<input type="checkbox" id="bux-checkbox__option-964071010" name="checkbox-error" />
<label for="bux-checkbox__option-964071010">Item 3</label>
</div>
</div>
</fieldset>
</div>
{#
Checkbox
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.
- input_name: String for the form element name. Optional.
- items: Array containing the form items.
- item.text: Display text for the form item.
- item.value: Value for the form item.
- error_helper_text:Content for the error helper text.
#}
{% import 'forms/_macros/attributes.twig' as Attributes %}
{% set random_seed = random() %}
{% set form_element = 'checkbox' %}
{% set element_id = "bux-" ~ form_element ~ "__" ~ form_element ~ "-" ~ random_seed %}
{% set base_class = "bux-" ~ form_element ~ "__fieldset" %}
{% set modifier_class = modifier ? ' ' ~ base_class ~ "--" ~ modifier : '' %}
{% set aria_describedby = "bux-" ~ form_element ~ "__helper-text-" ~ random_seed %}
{% if modifier == 'error' %}
{% set aria_error_describedby = 'error' ? "bux-" ~ form_element ~ "__error-message-" ~ random_seed %}
{% set aria_describedby = aria_error_describedby ~ ' ' ~ aria_describedby %}
{% endif %}
{% set field = {
form_element: form_element,
element_id: element_id,
descriptor: {
tag: 'legend',
text: legend
},
required: required,
random_seed: random_seed,
helper_text: helper_text,
attributes: {
id: element_id,
class: base_class ~ modifier_class,
'aria-describedby': helper_text ? aria_describedby : false,
placeholder: placeholder_text,
required: required ? true : false,
disabled: modifier == 'disabled' ? true : false,
'aria-invalid': modifier == 'error' ? true : false,
},
error_helper_text: error_helper_text
} %}
<div class="bux-{{ field.form_element }}">
<fieldset {{ Attributes.render(field.attributes) }}>
{% include '@descriptor' with field only %}
{% if helper_text %}
{% include '@helper' with field only %}
{% endif %}
{% if modifier == 'error' %}
{% include '@error' with field only %}
{% endif %}
<div class="bux-{{ field.form_element }}__input-spacer">
{% for item in items %}
{% set item_random_seed = random() %}
{% set item_base_class = "bux-%s__option"|format(field.form_element) %}
{% set item_modifier_class = modifier ? " %s--%s"|format(item_base_class, modifier) : '' %}
{% set item_attributes = {
type: "checkbox",
id: "bux-%s__option-%s"|format(field.form_element, item_random_seed),
name: input_name ?? field.attributes.id,
} %}
{% if field.is_disabled %}
{% set item_attributes = item_attributes|merge({disabled: true}) %}
{% endif %}
<div class="{{ item_base_class }}{{ item_modifier_class }}">
<input {{ Attributes.render(item_attributes) }} />
<label for="{{ item_attributes.id }}">{{ item.text }}</label>
</div>
{% endfor %}
</div>
</fieldset>
</div>
/* Primary */
legend: Form Input Label
helper_text: Helper Text
input_name: checkbox-default
items:
- text: Item 1
value: item_1
- text: Item 2
value: item_2
- text: Item 3
value: item_3
/* Required */
legend: Form Input Label
required: (required)
helper_text: Helper Text
input_name: checkbox-required
items:
- text: Item 1
value: item_1
- text: Item 2
value: item_2
- text: Item 3
value: item_3
/* Disabled */
modifier: disabled
legend: Form Input Label
helper_text: Helper Text
input_name: checkbox-disabled
items:
- text: Item 1
value: item_1
- text: Item 2
value: item_2
- text: Item 3
value: item_3
/* Error */
modifier: error
legend: Form Input Label
helper_text: Helper Text
error_helper_text: Error Helper Text
input_name: checkbox-error
items:
- text: Item 1
value: item_1
- text: Item 2
value: item_2
- text: Item 3
value: item_3
.bux-checkbox {
@include form-element;
&__option {
display: grid;
grid-template-columns: 18px auto;
gap: $sp-12;
label {
margin-top: 2px;
}
& + & {
margin-top: $sp-8;
}
input[type="checkbox"] {
appearance: none;
display: grid;
place-content: center;
margin: 3px 3px 3px 0;
border: solid 2px $gray-dark-80;
width: 20px;
height: 20px;
&:before {
content: "\f101";
font-family: "bux-icons";
color: $white;
z-index: 99;
font-size: 11px;
transform: scale(0);
transition: 120ms transform ease-in-out;
}
&:checked:before {
transform: scale(1);
}
&:checked {
border-color: $scarlet;
background-color: $scarlet;
}
&:focus {
outline: 2px solid $focus;
}
}
&--disabled,
&--disabled label {
cursor: not-allowed;
input[type="checkbox"],
input[type="checkbox"]:checked {
border: 2px solid $gray-light-40;
background-color: $gray-light-80;
&:checked:before {
content: none;
}
+ label {
color: $gray-light-20;
&:before,
&:checked:before {
content: none;
}
}
}
}
&--error > input[type="checkbox"] {
background: #ffeff2;
border-color: $scarlet;
}
}
&__error-message {
@include form-error-message;
margin-top: 5px;
}
}
No notes defined.