BUX Component Development Platform

Text Area: Primary 

<div class="bux-text-area">
    <label class="bux-text-area__label" for="bux-text-area__text-area-74916875">Form Input Label</label>
    <span class="bux-text-area__helper-text" id="bux-text-area__helper-text-74916875">Helper Text</span>
    <textarea id="bux-text-area__text-area-74916875" class="bux-text-area__text-area" placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-area__helper-text-74916875"></textarea>
</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>
 
input_label: Form Input Label
helper_text: 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.