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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A label identifies a form input and provides instructions or context about the expected value.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-label id="label-default" label="Full legal name" />
<c-text_input id="label-default" name="legal_name" />

<h2 class="font-heading-xl margin-top-4">With hint text</h2>
<c-label id="label-hint" label="Date of birth" hint="For example, 04/28/1986" />
<c-text_input id="label-hint" name="dob" />

<h2 class="font-heading-xl margin-top-4">Required</h2>
<c-label id="label-required" label="Email address" required="true" />
<c-text_input id="label-required" name="email" type="email" />

<h2 class="font-heading-xl margin-top-4">Required with hint</h2>
<c-label id="label-required-hint" label="Phone number" required="true" hint="10-digit U.S. phone number" />
<c-text_input id="label-required-hint" name="phone" type="tel" />

<h2 class="font-heading-xl margin-top-4">Error state</h2>
<c-form_group error="true">
  <c-label id="label-error" label="Social Security number" error="true" hint="For example, 123-45-6789" />
  <c-error_message id="label-error" error="Enter a valid Social Security number" />
  <c-text_input id="label-error" name="ssn" error="true" />
</c-form_group>

<h2 class="font-heading-xl margin-top-4">Required marker</h2>
<p>The required marker component renders an asterisk (<c-label.required_marker />) to visually indicate a required field. It is automatically included by the label component when the <code>required</code> prop is set.</p>
{% endblock %}