{% extends "demo_app/pattern_base.html" %}

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">An input suffix is a visual indicator placed after a text input to convey the unit or type of value expected, such as a unit of measurement.</p>

<h2 class="font-heading-xl margin-top-4">Unit of measurement</h2>
<c-form_group>
  <c-label id="suffix-sqft" label="Building area" />
  <c-input_group>
    <c-text_input id="suffix-sqft" name="area" inputmode="numeric" />
    <c-input_suffix>sq. ft.</c-input_suffix>
  </c-input_group>
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Percentage</h2>
<c-form_group>
  <c-label id="suffix-pct" label="Interest rate" />
  <c-input_group width="sm">
    <c-text_input id="suffix-pct" name="rate" inputmode="numeric" />
    <c-input_suffix>%</c-input_suffix>
  </c-input_group>
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Weight</h2>
<c-form_group>
  <c-label id="suffix-lbs" label="Package weight" />
  <c-input_group>
    <c-text_input id="suffix-lbs" name="weight" inputmode="numeric" />
    <c-input_suffix>lbs.</c-input_suffix>
  </c-input_group>
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Error state</h2>
<c-form_group error="true">
  <c-label id="suffix-error" label="Distance traveled" error="true" />
  <c-error_message id="suffix-error" error="Enter a number greater than zero" />
  <c-input_group error="true">
    <c-text_input id="suffix-error" name="distance" inputmode="numeric" error="true" />
    <c-input_suffix>miles</c-input_suffix>
  </c-input_group>
</c-form_group>
{% endblock %}