<!-- Primary -->
<div class="bux-text-area">
<label class="bux-text-area__label" for="bux-text-area__text-area-929811575">Form Input Label</label>
<span class="bux-text-area__helper-text" id="bux-text-area__helper-text-929811575">Helper Text</span>
<textarea id="bux-text-area__text-area-929811575" class="bux-text-area__text-area" placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-area__helper-text-929811575"></textarea>
</div>
<!-- Required -->
<div class="bux-text-area">
<label class="bux-text-area__label" for="bux-text-area__text-area-1766700546">Form Input Label <span class="bux-text-area__required">(required)</span></label>
<span class="bux-text-area__helper-text" id="bux-text-area__helper-text-1766700546">Helper Text</span>
<textarea id="bux-text-area__text-area-1766700546" class="bux-text-area__text-area" required placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-area__helper-text-1766700546"></textarea>
</div>
<!-- Disabled -->
<div class="bux-text-area">
<label class="bux-text-area__label" for="bux-text-area__text-area-528729413">Form Input Label</label>
<span class="bux-text-area__helper-text" id="bux-text-area__helper-text-528729413">Helper Text</span>
<textarea id="bux-text-area__text-area-528729413" class="bux-text-area__text-area bux-text-area__text-area--disabled" disabled="disabled" placeholder="Placeholder Text (Optional)" aria-describedby="bux-text-area__helper-text-528729413"></textarea>
</div>
<!-- Error -->
<div class="bux-text-area">
<label class="bux-text-area__label" for="bux-text-area__text-area-1393726755">Form Input Label</label>
<span class="bux-text-area__helper-text" id="bux-text-area__helper-text-1393726755">Helper Text</span>
<textarea id="bux-text-area__text-area-1393726755" 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-1393726755 bux-text-area__helper-text-1393726755"></textarea>
<span class="bux-text-area__error-message" id="bux-text-area__error-message-1393726755">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>
/* 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)
.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;
}
}
No notes defined.