mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-16 00:14:18 -05:00
95 lines
3.0 KiB
HTML
95 lines
3.0 KiB
HTML
{% macro textbox(
|
|
field,
|
|
label=None,
|
|
hint=False,
|
|
highlight_placeholders=False,
|
|
autofocus=False,
|
|
autosize=False,
|
|
help_link=None,
|
|
help_link_text=None,
|
|
width='2-3',
|
|
suffix=None,
|
|
safe_error_message=False,
|
|
rows=8,
|
|
extra_form_group_classes='',
|
|
placeholder='',
|
|
input_id=None
|
|
) %}
|
|
{% set field_id = kwargs.id if kwargs.id is defined else field.id %}
|
|
{% set described_by = '' %}
|
|
{% if hint %}{% set described_by = described_by + field_id ~ '-hint' %}{% endif %}
|
|
{% if field.errors %}
|
|
{% if described_by %}{% set described_by = described_by + ' ' %}{% endif %}
|
|
{% set described_by = described_by + field_id ~ '-error' %}
|
|
{% endif %}
|
|
|
|
<div
|
|
class="usa-form-group{% if field.errors %} usa-form-group--error{% endif %} {{ extra_form_group_classes }}"
|
|
data-module="{% if autofocus %}autofocus{% elif colour_preview %}colour-preview{% endif %}"
|
|
>
|
|
<label class="usa-label" for="{{ field_id }}">
|
|
{{ label or field.label.text }}
|
|
</label>
|
|
|
|
{% if hint %}
|
|
<div class="usa-hint" id="{{ field_id }}-hint">
|
|
{{ hint }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if field.errors %}
|
|
<span id="{{ field_id }}-error" class="error-message usa-error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}" tabindex="-1" aria-live="assertive" role="alert">
|
|
<span class="usa-sr-only">Error:</span>
|
|
{% if not safe_error_message %}
|
|
{{ field.errors[0] }}
|
|
{% else %}
|
|
{{ field.errors[0] | safe }}
|
|
{% endif %}
|
|
</span>
|
|
{% endif %}
|
|
|
|
{% if highlight_placeholders or autosize %}
|
|
{% set field_class = 'usa-textarea form-control-{} textbox-highlight-textbox'.format(width) %}
|
|
{% else %}
|
|
{% set field_class = 'usa-input' %}
|
|
{% endif %}
|
|
{% set field_class = 'form-control ' ~ field_class ~ (' form-control-error' if field.errors else '') %}
|
|
|
|
{% if autosize or highlight_placeholders %}
|
|
<textarea
|
|
id="{{ field_id }}"
|
|
name="{{ field.name }}"
|
|
class="{{ field_class }}"
|
|
rows="{{ rows }}"
|
|
placeholder="{{ placeholder }}"
|
|
aria-describedby="{{ described_by.strip() }}"
|
|
{% if field.flags.required %}required{% endif %}
|
|
data-module="enhanced-textbox"
|
|
data-highlight-placeholders="true"
|
|
>{{ field._value() }}</textarea>
|
|
{% else %}
|
|
{% set input_type = 'tel' if 'phone' in field.label.text else 'text' %}
|
|
<input
|
|
id="{{ field_id }}"
|
|
name="{{ field.name }}"
|
|
type="{{ input_type }}"
|
|
class="{{ field_class }}"
|
|
value="{{ field._value() }}"
|
|
placeholder="{{ placeholder }}"
|
|
aria-describedby="{{ described_by.strip() }}"
|
|
{% if field.flags.required %}required{% endif %}
|
|
/>
|
|
{% endif %}
|
|
|
|
{% if suffix %}
|
|
<span>{{ suffix }}</span>
|
|
{% endif %}
|
|
|
|
{% if help_link and help_link_text %}
|
|
<p class="textbox-help-link">
|
|
<a class="usa-link" href="{{ help_link }}">{{ help_link_text }}</a>
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|