BUX Component Development Platform

Switch: Primary 

<div class="bux-switch">
    <fieldset class="bux-switch__fieldset" id="bux-switch__switch-1958807437" aria-describedby="bux-switch__helper-text-1958807437">
        <legend class="bux-switch__legend">Form Input Label</legend>
        <span class="bux-switch__helper-text" id="bux-switch__helper-text-1958807437">Helper Text</span>
        <div class="bux-switch__input-spacer">
            <div class="bux-switch__option">
                <input type="checkbox" id="bux-switch__option-1848455502" role="switch">
                <label for="bux-switch__option-1848455502">Item 1</label>
            </div>
            <div class="bux-switch__option">
                <input type="checkbox" id="bux-switch__option-294069782" role="switch">
                <label for="bux-switch__option-294069782">Item 2</label>
            </div>
            <div class="bux-switch__option">
                <input type="checkbox" id="bux-switch__option-1606234944" role="switch">
                <label for="bux-switch__option-1606234944">Item 3</label>
            </div>
        </div>
    </fieldset>
</div>
 
{# 

Switch

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 switch_id = "switch-" ~ random_seed %}

<div class="bux-switch">
  <fieldset class="bux-switch__fieldset" id="bux-switch__{{ switch_id }}" aria-describedby="{% if "error" in modifier %} bux-switch__error-message {% endif %}bux-switch__helper-text-{{ random_seed }}"
  {% if required %} required {% endif %}
  {% if "error" in modifier %} aria-invalid="true" {% endif %}>
  <legend class="bux-switch__legend">{{ legend }}{% if required %} <span class="bux-switch__required">{{required}}</span>{% endif %}</legend>
  <span class="bux-switch__helper-text" id="bux-switch__helper-text-{{ random_seed }}">{{ helper_text }}</span>
  <div class="bux-switch__input-spacer">
    {% for item in items %}
      {% set random_seed_option = random() %}
      {% set switch_option_id = "bux-switch__option-" ~ random_seed_option %}
      <div class="bux-switch__option{% if modifier %} bux-switch__option--{{ modifier }}{% endif %}">
        <input type="checkbox" id="{{ switch_option_id }}" role="switch" {% if "disabled" in modifier %} disabled {% endif %}>
        <label for="{{ switch_option_id }}">{{ item.text }}</label>
      </div>
    {% endfor %}
  </div>
  {% if "error" in modifier %}
    <span class="bux-switch__error-message" id="bux-switch__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
  {% endif %}
</fieldset>
</div>
 
legend: Form Input Label
helper_text: Helper Text
items:
  - text: Item 1
  - text: Item 2
  - text: Item 3
  • Content: 
    .bux-switch {
  @include form-element;

  &__option {
    display: grid;
    grid-template-columns: 45px auto;
    gap: $sp-12;

    label {
      margin-top: 4px;
    }

    & + & {
      margin-top: $sp-8;
    }

    input {
      appearance: none;
      cursor: pointer;
      background-color: $gray-dark-80;
      border: none;
      border-radius: 32px;
      height: 24px;
      width: 45px;
      display: grid;
      place-content: center;
      margin: 0;
      transform: translateY(3px);

      &:checked {
        background-color: $scarlet;
      }

      &:before {
        content: "";
        height: 18px;
        width: 18px;
        background-color: white;
        transition: 120ms transform ease-in-out;
        border-radius: 50%;
        transform: translate(-10px, 4px);
      }

      &:checked:before {
        transform: translate(10px, 4px);
      }

      &:after {
        content: "";
        height: 9px;
        width: 2px;
        border-radius: 2px;
        background-color: $white;
        transition: 120ms transform ease-in-out;
        transform: translate(0, -6px);
      }

      &:checked:after {
        background-color: $scarlet;
        transform: translate(18.5px, -9px);
      }

      &:focus {
        outline: 2px solid $focus;
      }
    }

    &--disabled input {
      background-color: $gray-light-40;
    }

    &--disabled label {
      color: $gray-light-40;
    }
  }
  &__error-message {
    @include form-error-message;
    margin-top: 8px;
  }
}
  • URL: /components/raw/switch/_switch.scss
  • Filesystem Path: src/components/forms/switch/_switch.scss
  • Size: 1.5 KB

No notes defined.