<div class="bux-text-field">
<label class="bux-text-field__label" for="bux-text-field__text-input-2033864554">Form Input Label</label>
<span class="bux-text-field__helper-text" id="bux-text-field__helper-text-2033864554">Helper Text</span>
<input id="bux-text-field__text-input-2033864554" class="bux-text-field__input" placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-field__helper-text-2033864554" />
</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>
input_label: Form Input Label
helper_text: Helper Text
placeholder_text: Placeholder Text (Optional)
.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;
}
}
}
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));
});
No notes defined.