BUX Component Development Platform

Text Field 

<!-- Primary -->
<div class="bux-text-field">
    <label class="bux-text-field__label" for="bux-text-field__text-input-86146535">Form Input Label</label>
    <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-86146535">Helper Text</span>
    <input id="bux-text-field__text-input-86146535" class="bux-text-field__input" placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-field__helper-text-86146535" />
</div>


<!-- Required -->
<div class="bux-text-field">
    <label class="bux-text-field__label" for="bux-text-field__text-input-1574631373">Form Input Label <span class="bux-text-field__required">(required)</span></label>
    <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-1574631373">Helper Text</span>
    <input id="bux-text-field__text-input-1574631373" class="bux-text-field__input" required placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-field__helper-text-1574631373" />
</div>


<!-- Disabled -->
<div class="bux-text-field">
    <label class="bux-text-field__label" for="bux-text-field__text-input-1835777774">Form Input Label</label>
    <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-1835777774">Helper Text</span>
    <input id="bux-text-field__text-input-1835777774" class="bux-text-field__input bux-text-field__input--disabled" disabled="disabled" placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-field__helper-text-1835777774" />
</div>


<!-- Error -->
<div class="bux-text-field">
    <label class="bux-text-field__label" for="bux-text-field__text-input-1861614823">Form Input Label</label>
    <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-1861614823">Helper Text</span>
    <input id="bux-text-field__text-input-1861614823" class="bux-text-field__input bux-text-field__input--error" aria-invalid="true" placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-field__error-message-1861614823 bux-text-field__helper-text-1861614823" />
    <span class="bux-text-field__error-message" id="bux-text-field__error-message-1861614823">Error Helper Text</span>
</div>


<!-- Password -->
<div class="bux-text-field">
    <label class="bux-text-field__label" for="bux-text-field__password-input-924990019">Form Input Label</label>
    <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-924990019">Helper Text</span>
    <input id="bux-text-field__password-input-924990019" class="bux-text-field__input bux-text-field__input--password" type="password" placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-field__helper-text-924990019" />

    <button class="bux-text-field__password-icon bux-text-field__password-icon--view bux-tooltip__button" id="bux-text-field__password-toggle-924990019" title="Show Password" aria-label="Show Password" aria-pressed="false"></button>
</div>


{# 

Text Field

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled, password.
- input_label:           String for the form legend.
- helper_text:      String for the form helper text.
- placeholder_text: Strong for the form's placeholder text.
- error_helper_text:Content for the error helper text.

#}

{% if "password" in modifier %}
    {% set text_field_id = "password-input-" %}
{% else %}
    {% set text_field_id = "text-input-" %}
{% endif %}

{% set random_seed = random() %}
{% set text_field_id = text_field_id ~ random_seed %}

<div class="bux-text-field">
    <label class="bux-text-field__label" for="bux-text-field__{{ text_field_id }}">{{ input_label}}{% if required %} <span class="bux-text-field__required">(required)</span>{% endif %}</label>
    <span class="bux-text-field__helper-text" id="bux-text-field__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <input 
        id="bux-text-field__{{ text_field_id }}" 
        class="bux-text-field__input{% if modifier %} bux-text-field__input--{{ modifier }}{% endif %}" 
        {% if required %} required {% endif %} 
        {% if "disabled" in modifier %} disabled="disabled" {% endif %} 
        {% if "error" in modifier %} aria-invalid="true" {% endif %} 
        {% if "password" in modifier %} type="password" {% endif %}
        placeholder="{{ placeholder_text }}"
        aria-describedby="{% if "error" in modifier %}bux-text-field__error-message-{{ random_seed }} {% endif %}bux-text-field__helper-text-{{ random_seed }}" 
    />
    {% if "password" in modifier %} 
        <button class="bux-text-field__password-icon bux-text-field__password-icon--view bux-tooltip__button" id="bux-text-field__password-toggle-{{ random_seed }}" title="Show Password" aria-label="Show Password" aria-pressed="false"></button> 
    {% endif %}
    {% if "error" in modifier %}
        <span class="bux-text-field__error-message" id="bux-text-field__error-message-{{ random_seed }}">{{ error_helper_text }}</span>
    {% endif %}
</div>
 
/* Primary */
input_label: Form Input Label
helper_text: Helper Text
placeholder_text: Placeholder Text (Optional)



/* Required */
input_label: Form Input Label
required: (required)
helper_text: Helper Text
placeholder_text: Placeholder Text (Optional)



/* Disabled */
modifier: disabled
input_label: Form Input Label
helper_text: Helper Text
placeholder_text: Placeholder Text (Optional)



/* Error */
modifier: error
input_label: Form Input Label
helper_text: Helper Text
error_helper_text: Error Helper Text
placeholder_text: Placeholder Text (Optional)



/* Password */
modifier: password
input_label: Form Input Label
helper_text: Helper Text
placeholder_text: Placeholder Text (Optional)
  • Content: 
    .bux-text-field {
  @include form-element;

  &__input {
    @include form-input;
    height: 40px;

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

    &--disabled {
      @include form-input-disabled;
    }

    &--error {
      @include form-input-error;
    }

    &--password {
      display: inline-block;
    }
  }

  &__error-message {
    @include form-error-message;
  }

  &__password-icon {
    @include button-reset;
    height: 30px;
    width: 36px;
    font-size: 18px;
    position: absolute;
    right: 2px;
    margin-top: 18px;

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

    &--view:after {
      content: "\f014";
      font-family: $icon;
    }

    &--hide:after {
      content: "\f100";
      font-family: $icon;
    }
  }
}
  • URL: /components/raw/text-field/_text-field.scss
  • Filesystem Path: src/components/forms/text-field/_text-field.scss
  • Size: 768 Bytes
  • Content: 
    function passwordToggle(inputFieldId, toggleButtonId) {
  let inputField = document.querySelector(`#${inputFieldId}`);
  inputField.type = inputField.type === "password" ? "text" : "password";

  let toggleButton = document.querySelector(`#${toggleButtonId}`);
  toggleButton.classList.toggle("bux-text-field__password-icon--hide");
  toggleButton.title = toggleButton.title === "Hide Password" ? "Show Password" : "Hide Password";
  toggleButton.ariaPressed = toggleButton.title === "Hide Password" ? "true": "false";
}

let passwordToggleButtons = document.querySelectorAll(".bux-text-field__password-icon");
passwordToggleButtons.forEach((toggleButton) => {
  let randomId = toggleButton.id.split("-")[4];
  let inputFieldId = `bux-text-field__password-input-${randomId}`;
  toggleButton.addEventListener("click", () => passwordToggle(inputFieldId, toggleButton.id));
});
  • URL: /components/raw/text-field/text-field.js
  • Filesystem Path: src/components/forms/text-field/text-field.js
  • Size: 875 Bytes

No notes defined.