<div class="bux-text-area">
<label class="bux-text-area__label" for="bux-text-area__text-area-1857421585">
Form Input Label
</label>
<span class="bux-text-area__helper-text" id="bux-text-area__helper-text-1857421585">
Helper Text
</span>
<textarea id="bux-text-area__text-area-1857421585" class="bux-text-area__text-area bux-text-area__text-area--disabled" name="text-area-disabled" aria-describedby="bux-text-area__helper-text-1857421585" placeholder="Placeholder Text (Optional)" disabled></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, password.
- input_label: String for the form legend.
- helper_text: String for the form helper text.
- input_name: String for the form element name. Optional.
- placeholder_text: Strong for the form's placeholder text.
- error_helper_text: Content for the error helper text.
#}
{% import 'forms/_macros/attributes.twig' as Attributes %}
{% set random_seed = random() %}
{% set form_element = "text-area" %}
{% set element_id = "bux-" ~ form_element ~ "__" ~ form_element ~ "-" ~ random_seed %}
{% set base_class = "bux-" ~ form_element ~ "__" ~ form_element %}
{% set modifier_class = modifier ? ' ' ~ base_class ~ "--" ~ modifier : '' %}
{% set aria_describedby = "bux-" ~ form_element ~ "__helper-text-" ~ random_seed %}
{% if modifier == 'error' %}
{% set aria_error_describedby = 'error' ? "bux-" ~ form_element ~ "__error-message-" ~ random_seed %}
{% set aria_describedby = aria_error_describedby ~ ' ' ~ aria_describedby %}
{% endif %}
{% set field = {
form_element: form_element,
element_id: element_id,
descriptor: {
tag: 'label',
text: input_label
},
required: required,
random_seed: random_seed,
helper_text: helper_text,
attributes: {
id: element_id,
class: base_class ~ modifier_class,
name: input_name ?? element_id,
'aria-describedby': helper_text ? aria_describedby : false,
placeholder: placeholder_text,
required: required ? true : false,
disabled: modifier == 'disabled' ? true : false,
'aria-invalid': modifier == 'error' ? true : false,
},
error_helper_text: error_helper_text
} %}
<div class="bux-{{ field.form_element }}">
{% include '@descriptor' with field only %}
{% if field.helper_text %}
{% include '@helper' with field only %}
{% endif %}
{% if modifier == 'error' %}
{% include '@error' with field only %}
{% endif %}
<textarea {{ Attributes.render(field.attributes) }} ></textarea>
</div>
modifier: disabled
input_label: Form Input Label
helper_text: Helper Text
placeholder_text: Placeholder Text (Optional)
input_name: text-area-disabled
.bux-text-area {
@include form-element;
&__text-area {
@include form-input;
min-height: 44px;
max-width: 100%;
&:focus {
outline: 2px solid $focus;
}
&--disabled {
@include form-input-disabled;
}
&--error {
@include form-input-error;
}
}
&__error-message {
@include form-error-message;
}
}
No notes defined.