BUX Component Development Platform

Checkbox 

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


<!-- Required -->
<div class="bux-checkbox">
    <fieldset class="bux-checkbox__fieldset" id="bux-checkbox__checkbox-1133201196" aria-describedby="bux-checkbox__helper-text-1133201196" 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-1133201196">Helper Text</span>
        <div class="bux-checkbox__input-spacer">
            <div class="bux-checkbox__option">
                <input type="checkbox" id="bux-checkbox__option-737755522" value="item_1">
                <label for="bux-checkbox__option-737755522">Item 1</label>
            </div>
            <div class="bux-checkbox__option">
                <input type="checkbox" id="bux-checkbox__option-169352644" value="item_2">
                <label for="bux-checkbox__option-169352644">Item 2</label>
            </div>
            <div class="bux-checkbox__option">
                <input type="checkbox" id="bux-checkbox__option-1183577038" value="item_3">
                <label for="bux-checkbox__option-1183577038">Item 3</label>
            </div>
        </div>
    </fieldset>
</div>


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


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