BUX Component Development Platform

Checkbox 

<!-- Primary -->
<div class="bux-checkbox">
    <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__checkbox-29380895" aria-describedby="bux-checkbox__helper-text-29380895">
        <legend class="bux-checkbox__legend">Form Input Label</legend>
        <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-29380895">Helper Text</span>
        <div class="bux-checkbox__input-spacer">
            <div class="bux-checkbox__option">
                <input type="checkbox" id="bux-checkbox__option-1776497438" value="item_1">
                <label for="bux-checkbox__option-1776497438">Item 1</label>
            </div>
            <div class="bux-checkbox__option">
                <input type="checkbox" id="bux-checkbox__option-750789513" value="item_2">
                <label for="bux-checkbox__option-750789513">Item 2</label>
            </div>
            <div class="bux-checkbox__option">
                <input type="checkbox" id="bux-checkbox__option-609138370" value="item_3">
                <label for="bux-checkbox__option-609138370">Item 3</label>
            </div>
        </div>
    </fieldset>
</div>


<!-- Required -->
<div class="bux-checkbox">
    <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__checkbox-849943431" aria-describedby="bux-checkbox__helper-text-849943431" required>
        <legend class="bux-checkbox__legend">Form Input Label <span class="bux-text-field__required">(required)</span></legend>
        <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-849943431">Helper Text</span>
        <div class="bux-checkbox__input-spacer">
            <div class="bux-checkbox__option">
                <input type="checkbox" id="bux-checkbox__option-1097886424" value="item_1">
                <label for="bux-checkbox__option-1097886424">Item 1</label>
            </div>
            <div class="bux-checkbox__option">
                <input type="checkbox" id="bux-checkbox__option-2091496734" value="item_2">
                <label for="bux-checkbox__option-2091496734">Item 2</label>
            </div>
            <div class="bux-checkbox__option">
                <input type="checkbox" id="bux-checkbox__option-1518183887" value="item_3">
                <label for="bux-checkbox__option-1518183887">Item 3</label>
            </div>
        </div>
    </fieldset>
</div>


<!-- Disabled -->
<div class="bux-checkbox">
    <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__checkbox-1559001489" aria-describedby="bux-checkbox__helper-text-1559001489">
        <legend class="bux-checkbox__legend">Form Input Label</legend>
        <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-1559001489">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-1895062014" value="item_1" disabled>
                <label for="bux-checkbox__option-1895062014">Item 1</label>
            </div>
            <div class="bux-checkbox__option bux-checkbox__option--disabled">
                <input type="checkbox" id="bux-checkbox__option-1409401584" value="item_2" disabled>
                <label for="bux-checkbox__option-1409401584">Item 2</label>
            </div>
            <div class="bux-checkbox__option bux-checkbox__option--disabled">
                <input type="checkbox" id="bux-checkbox__option-314281836" value="item_3" disabled>
                <label for="bux-checkbox__option-314281836">Item 3</label>
            </div>
        </div>
    </fieldset>
</div>


<!-- Error -->
<div class="bux-checkbox">
    <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__checkbox-1746568148" aria-describedby="bux-checkbox__error-message-1746568148 bux-checkbox__helper-text-1746568148" aria-invalid="true">
        <legend class="bux-checkbox__legend">Form Input Label</legend>
        <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-1746568148">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-697904663" value="item_1">
                <label for="bux-checkbox__option-697904663">Item 1</label>
            </div>
            <div class="bux-checkbox__option bux-checkbox__option--error">
                <input type="checkbox" id="bux-checkbox__option-466036660" value="item_2">
                <label for="bux-checkbox__option-466036660">Item 2</label>
            </div>
            <div class="bux-checkbox__option bux-checkbox__option--error">
                <input type="checkbox" id="bux-checkbox__option-1600900058" value="item_3">
                <label for="bux-checkbox__option-1600900058">Item 3</label>
            </div>
        </div>
        <span class="bux-checkbox__error-message" id="bux-checkbox__error-message-1746568148">Error Helper Text</span>
    </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.
- 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.

#}

{% set random_seed = random() %}
{% set checkbox_id = "checkbox-" ~ random_seed %}

<div class="bux-checkbox">
    <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__{{ checkbox_id }}" aria-describedby="{% if "error" in modifier %}bux-checkbox__error-message-{{ random_seed }} {% endif %}bux-checkbox__helper-text-{{ random_seed }}"
    {% if required %} required {% endif %}
    {% if "error" in modifier %} aria-invalid="true" {% endif %}>
    <legend class="bux-checkbox__legend">{{ legend }}{% if required %} <span class="bux-text-field__required">{{required}}</span>{% endif %}</legend>
    <span class="bux-checkbox__helper-text" id="bux-checkbox__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <div class="bux-checkbox__input-spacer">
        {% for item in items %}
            {% set random_seed_option = random() %}
            {% set checkbox_option_id = "bux-checkbox__option-" ~ random_seed_option %}
            <div class="bux-checkbox__option{% if modifier %} bux-checkbox__option--{{ modifier }}{% endif %}">
                <input type="checkbox" id="{{ checkbox_option_id }}" {% if item.value %} value="{{ item.value }}" {% endif %} {% if "disabled" in modifier %} disabled {% endif %}>
                <label for="{{ checkbox_option_id }}">{{ item.text }}</label>
            </div>
        {% endfor %}
    </div>
    {% if "error" in modifier %}
        <span class="bux-checkbox__error-message" id="bux-checkbox__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</fieldset>
</div>
 
/* Primary */
legend: Form Input Label
helper_text: Helper Text
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
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
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
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.