BUX Component Development Platform

Switch 

<!-- Primary -->
<div class="bux-switch">
    <fieldset id="bux-switch__switch-1430749116" class="bux-switch__fieldset" aria-describedby="bux-switch__helper-text-1430749116">

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

        <span class="bux-switch__helper-text" id="bux-switch__helper-text-1430749116">
            Helper Text
        </span>

        <div class="bux-switch__input-spacer">

            <div class="bux-switch__option ">
                <input type="checkbox" id="bux-switch__option-769709450" name="switch-default" role="switch" />
                <label for="bux-switch__option-769709450">Item 1</label>
            </div>

            <div class="bux-switch__option ">
                <input type="checkbox" id="bux-switch__option-1023819147" name="switch-default" role="switch" />
                <label for="bux-switch__option-1023819147">Item 2</label>
            </div>

            <div class="bux-switch__option ">
                <input type="checkbox" id="bux-switch__option-1955048904" name="switch-default" role="switch" />
                <label for="bux-switch__option-1955048904">Item 3</label>
            </div>
        </div>
    </fieldset>
</div>


<!-- Required -->
<div class="bux-switch">
    <fieldset id="bux-switch__switch-769096296" class="bux-switch__fieldset" aria-describedby="bux-switch__helper-text-769096296" required>

        <legend class="bux-switch__legend">
            Form Input Label

            <span class="bux-switch__required">
                (required)
            </span>
        </legend>

        <span class="bux-switch__helper-text" id="bux-switch__helper-text-769096296">
            Helper Text
        </span>

        <div class="bux-switch__input-spacer">

            <div class="bux-switch__option ">
                <input type="checkbox" id="bux-switch__option-561656274" name="switch-required" role="switch" />
                <label for="bux-switch__option-561656274">Item 1</label>
            </div>

            <div class="bux-switch__option ">
                <input type="checkbox" id="bux-switch__option-1770675914" name="switch-required" role="switch" />
                <label for="bux-switch__option-1770675914">Item 2</label>
            </div>

            <div class="bux-switch__option ">
                <input type="checkbox" id="bux-switch__option-1405171254" name="switch-required" role="switch" />
                <label for="bux-switch__option-1405171254">Item 3</label>
            </div>
        </div>
    </fieldset>
</div>


<!-- Disabled -->
<div class="bux-switch">
    <fieldset id="bux-switch__switch-1532690147" class="bux-switch__fieldset bux-switch__fieldset--disabled" aria-describedby="bux-switch__helper-text-1532690147" disabled>

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

        <span class="bux-switch__helper-text" id="bux-switch__helper-text-1532690147">
            Helper Text
        </span>

        <div class="bux-switch__input-spacer">

            <div class="bux-switch__option  bux-switch__option--disabled">
                <input type="checkbox" id="bux-switch__option-1249249928" name="switch-disabled" role="switch" />
                <label for="bux-switch__option-1249249928">Item 1</label>
            </div>

            <div class="bux-switch__option  bux-switch__option--disabled">
                <input type="checkbox" id="bux-switch__option-1511352982" name="switch-disabled" role="switch" />
                <label for="bux-switch__option-1511352982">Item 2</label>
            </div>

            <div class="bux-switch__option  bux-switch__option--disabled">
                <input type="checkbox" id="bux-switch__option-1852562428" name="switch-disabled" role="switch" />
                <label for="bux-switch__option-1852562428">Item 3</label>
            </div>
        </div>
    </fieldset>
</div>


<!-- Error -->
<div class="bux-switch">
    <fieldset id="bux-switch__switch-1326121433" class="bux-switch__fieldset bux-switch__fieldset--error" aria-describedby="bux-switch__error-message-1326121433 bux-switch__helper-text-1326121433" aria-invalid="true">

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

        <span class="bux-switch__helper-text" id="bux-switch__helper-text-1326121433">
            Helper Text
        </span>

        <span class="bux-switch__error-message" id="bux-switch__error-message-1326121433">
            Error Helper Text
        </span>

        <div class="bux-switch__input-spacer">

            <div class="bux-switch__option  bux-switch__option--error">
                <input type="checkbox" id="bux-switch__option-825815459" name="switch-error" role="switch" />
                <label for="bux-switch__option-825815459">Item 1</label>
            </div>

            <div class="bux-switch__option  bux-switch__option--error">
                <input type="checkbox" id="bux-switch__option-1376069976" name="switch-error" role="switch" />
                <label for="bux-switch__option-1376069976">Item 2</label>
            </div>

            <div class="bux-switch__option  bux-switch__option--error">
                <input type="checkbox" id="bux-switch__option-1056038331" name="switch-error" role="switch" />
                <label for="bux-switch__option-1056038331">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.
- input_name:       String for the form element name. Optional.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- error_helper_text:Content for the error helper text.

#}

{% import '@attributes' as Attributes %}

{% set random_seed = random() %}
{% set form_element = 'switch' %}
{% 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,
                    role: 'switch'
                } %}

                {% 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: switch-default
items:
  - text: Item 1
  - text: Item 2
  - text: Item 3



/* Required */
legend: Form Input Label
required: (required)
helper_text: Helper Text
input_name: switch-required
items:
  - text: Item 1
  - text: Item 2
  - text: Item 3



/* Disabled */
modifier: disabled
legend: Form Input Label
helper_text: Helper Text
input_name: switch-disabled
items:
  - text: Item 1
  - text: Item 2
  - text: Item 3



/* Error */
modifier: error
legend: Form Input Label
helper_text: Helper Text
error_helper_text: Error Helper Text
input_name: switch-error
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: var(--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: var(--scarlet);
      }

      &::after {
        font-family: bux-icons;
        content: "\f105";
        font-size: 8px;
        color: var(--black);
        background: var(--white);
        -webkit-text-stroke: 1px;
        border-radius: 50%;
        height: 18px;
        width: 18px;
        line-height: 18px;
        text-align: center;
        transition: transform 120ms ease-in-out;
        transform: translate(-10px);
      }

      &:checked::after {
        content: "\f101";
        font-size: 10px;
        color: var(--scarlet);
        transform: translate(10px);
        @include dark-theme {
          color: var(--black);
        }
      }

      &:focus {
        outline: 2px solid var(--focus);
      }
    }

    &--disabled {
      input {
        &,
        &:checked {
          background-color: var(--gray-light-40);

          &::after {
            color: var(--gray-light-40);
          }
        }
      }

      label {
        color: var(--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.6 KB

No notes defined.