Django pattern library

Form example

Window sizes

API & Examples
Template Source
Variant Configuration

Example usage:

<c-form action="/submit">

    <fieldset class="usa-fieldset">

        <legend class="usa-legend usa-legend--large">Your Information</legend>

        <c-form-group>
            <c-label 
                id="first-name" 
                label="First Name" 
                required="true"
            />

            <c-text-input
                id="first-name-input"
                name="first-name"
                type="text"
                required="true"
                type="text"
            />
        </c-form-group>

        <c-form-group>
            <c-label 
                id="last-name" 
                label="Last Name" 
                required="true"
            />

            <c-text-input
                id="last-name-input"
                name="last-name"
                type="text"
                required="true"
                type="text"
            />
        </c-form-group>

        <c-button>Submit</c-button>


    </fieldset>

</c-form>

{% cotton form action="/submit" %}

    <fieldset class="usa-fieldset">

        <legend class="usa-legend usa-legend--large">Your Information</legend>

        {% for field in fields %}

        {% cotton form-group %}
            {% cotton label id="{{field.id }}" label="{{ field.label }}" required="true" %}{% endcotton %}

            {% cotton text-input id="{{ field.id }}" name="first-name" required="true" type="{{ field.type|default:'text'}}" %}{% endcotton %}
        {% endcotton %}

        {% endfor %}

    </fieldset>

{% endcotton %}

name: Form example
context:
  fields:
    - label: First Name
      id: first-name
    - label: Last Name
      id: last-name
    - label: Email
      id: email
      type: email
    - label: Street Address
      id: street-address
    - label: City
      id: city
    - label: State
      id: state
    - label: ZIP Code
      id: zip-code