BUX Component Development Platform

Text Area: Error 

<div class="bux-text-area">
    <label class="bux-text-area__label" for="bux-text-area__text-area-1729537814">Form Input Label</label>
    <span class="bux-text-area__helper-text" id="bux-text-area__helper-text-1729537814">Helper Text</span>
    <textarea id="bux-text-area__text-area-1729537814" class="bux-text-area__text-area bux-text-area__text-area--error" aria-invalid="true" placeholder="Placeholder Text (Optional)" aria-describedby=" bux-text-area__error-message-1729537814 bux-text-area__helper-text-1729537814"></textarea>
    <span class="bux-text-area__error-message" id="bux-text-area__error-message-1729537814">Error Helper Text</span>
</div>
 
{# 

Text Area

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item. Allowed values: null, 
                    error, disabled.
- 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.

#}

{% set random_seed = random() %}
{% set text_area_id =  "text-area-" ~ random_seed %}

<div class="bux-text-area">
    <label class="bux-text-area__label" for="bux-text-area__{{ text_area_id }}">{{ input_label }}{% if required %} <span class="bux-text-area__required">{{required}}</span>{% endif %}</label>
    <span class="bux-text-area__helper-text" id="bux-text-area__helper-text-{{ random_seed }}">{{ helper_text }}</span>
    <textarea id="bux-text-area__{{ text_area_id }}" class="bux-text-area__text-area{% if modifier %} bux-text-area__text-area--{{ modifier }}{% endif %}" 
    {% if required %} required {% endif %} 
    {% if "disabled" in modifier %} disabled="disabled" {% endif %}
    {% if "error" in modifier %} aria-invalid="true" {% endif %}
    placeholder="{{ placeholder_text }}" aria-describedby="{% if "error" in modifier %} bux-text-area__error-message-{{ random_seed }} {% endif %}bux-text-area__helper-text-{{ random_seed }}"></textarea>
    {% if "error" in modifier %}
        <span class="bux-text-area__error-message" id="bux-text-area__error-message-{{ random_seed }}">{{ error_helper_text}}</span>
    {% endif %}
</div>
 
modifier: error
input_label: Form Input Label
helper_text: Helper Text
error_helper_text: Error Helper Text
placeholder_text: Placeholder Text (Optional)
  • Content: 
    .bux-text-area {
  @include form-element;

  &__text-area {
    @include form-input;

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

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

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

  &__error-message {
    @include form-error-message;
  }
}
  • URL: /components/raw/text-area/_text-area.scss
  • Filesystem Path: src/components/forms/text-area/_text-area.scss
  • Size: 320 Bytes

No notes defined.