<div class="bux-checkbox">
    <fieldset id="bux-checkbox__checkbox-641879531" class="bux-checkbox__fieldset bux-checkbox__fieldset--disabled" aria-describedby="bux-checkbox__helper-text-641879531" disabled>

        <legend class="bux-checkbox__legend">
            Form Input Label
        </legend>

        <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-641879531">
            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-626502958" name="checkbox-disabled" />
                <label for="bux-checkbox__option-626502958">Item 1</label>
            </div>

            <div class="bux-checkbox__option bux-checkbox__option--disabled">
                <input type="checkbox" id="bux-checkbox__option-47001603" name="checkbox-disabled" />
                <label for="bux-checkbox__option-47001603">Item 2</label>
            </div>

            <div class="bux-checkbox__option bux-checkbox__option--disabled">
                <input type="checkbox" id="bux-checkbox__option-1619525262" name="checkbox-disabled" />
                <label for="bux-checkbox__option-1619525262">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>
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
  • Content:
    .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;
      }
    }
    
  • URL: /components/raw/checkbox/_checkbox.scss
  • Filesystem Path: src/components/forms/checkbox/_checkbox.scss
  • Size: 1.5 KB

No notes defined.