Pattern Library

<div class="flex flex-col gap-2 items-start">
  {% if label %}
    <div>
      <label for="{{ id }}" class="leading-5">
        {{ label }}
      </label>

      {% if is_required %}
        <span class="text-red-600">*</span>
      {% endif %}
    </div>
  {% endif %}

  <div class="flex w-full gap-2">
    <input
      type="{% block type %}text{% endblock %}"
      class="
        py-3 px-3 w-full lg:w-96

        {% block color_classes %}
          bg-grey-100 border border-grey-200
        {% endblock %}

        {{ extra_classes }}
      "
      value=""
      id="{{ id }}"
      name="{{ id }}"
      placeholder="{{ placeholder }}"
    />

    {% if is_required and not label %}
      <span class="text-red-600">*</span>
    {% endif %}
  </div>

  {% if hint %}
    <label
      class="text-grey-250 text-sm"
      for="{{ id }}"
    >{{ hint }}</label>
  {% endif %}
</div>