Skip to main content

Form group

A form group contains one option or form field under one question.

The Form group component contains one form element such as an input, textarea, or select. The form element has a meaningful label associated with it. It may also contain an extra hint to help the user provide a valid answer.

Details

  • Honeycrisp: Form group molecule
  • Customization: Design tokens and Styles
  • Modifier: .cfa-form-group, .cfa-label, .cfa-hint, .cfa-input-group, .cfa-input, .cfa-textarea, .cfa-select

The Form group includes the text input component, textarea component, select component, and other components that do not have dedicated documentation in the USWDS (labels and hints). The visual appearance is modified using design tokens from the Honeycrisp Form elements atom and Form group molecule. Further customization is applied using the CSS modifiers .cfa-form-group, .cfa-label, .cfa-hint, .cfa-input-group, .cfa-input, .cfa-textarea, .cfa-select to add styles defined in custom stylesheets.

Design tokens. Tokens define the name of basic system elements such as color, typography, or spacing. The values of tokens are relative to how the system defines them. This enables teams to alter the visual appearance of components yet remain within the system boundaries. Learn more about tokens on the Bixal's Design Tokens Guide.

Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.

Examples

Form group with text input
Legally as it appears on your I.D.

The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

<div class="usa-form-group cfa-form-group" id="form-group-27cb92d7128cb">
  <label class="usa-label cfa-label" for="input-27cb92d7128cb">
    <span>What is your first name? <abbr class="usa-hint usa-hint--required cfa-hint text-normal">(required)</abbr>
    </span>
  </label>
  <div class="usa-hint cfa-hint" id="hint-27cb92d7128cb">Legally as it appears on your I.D.</div>
  <div>
    <div>
      <input class="usa-input cfa-input" type="text" id="input-27cb92d7128cb" name="input['27cb92d7128cb']" aria-describedby="hint-27cb92d7128cb">
    </div>
  </div>
</div>

Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

{
  "modifier": "cfa-form-group",
  "id": "form-group-27cb92d7128cb",
  "label": {
    "text": "What is your first name? <abbr class=\"usa-hint usa-hint--required cfa-hint text-normal\">(required)</abbr>",
    "for": "input-27cb92d7128cb",
    "modifier": "cfa-label",
    "modifierHint": "cfa-hint"
  },
  "hint": {
    "text": "Legally as it appears on your I.D.",
    "modifier": "cfa-hint",
    "id": "hint-27cb92d7128cb"
  },
  "input": {
    "modifier": "cfa-input",
    "id": "input-27cb92d7128cb",
    "name": "input['27cb92d7128cb']",
    "ariaDescribedby": "hint-27cb92d7128cb",
    "type": "text"
  }
}
Form group with email input
Legally as it appears on your I.D.

The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

<div class="usa-form-group cfa-form-group" id="form-group-1e67e12e1373a">
  <label class="usa-label cfa-label" for="input-1e67e12e1373a">
    <span>What is your email address?</span>
  </label>
  <div class="usa-hint cfa-hint" id="hint-1e67e12e1373a">Legally as it appears on your I.D.</div>
  <div>
    <div>
      <input class="usa-input cfa-input" type="email" id="input-1e67e12e1373a" name="input['1e67e12e1373a']" aria-describedby="hint-1e67e12e1373a">
    </div>
  </div>
</div>

Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

{
  "modifier": "cfa-form-group",
  "id": "form-group-1e67e12e1373a",
  "label": {
    "text": "What is your email address?",
    "for": "input-1e67e12e1373a",
    "modifier": "cfa-label",
    "modifierHint": "cfa-hint"
  },
  "hint": {
    "text": "Legally as it appears on your I.D.",
    "modifier": "cfa-hint",
    "id": "hint-1e67e12e1373a"
  },
  "input": {
    "modifier": "cfa-input",
    "id": "input-1e67e12e1373a",
    "name": "input['1e67e12e1373a']",
    "ariaDescribedby": "hint-1e67e12e1373a",
    "type": "email"
  }
}
Form group with textarea

The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

<div class="usa-form-group cfa-form-group" id="form-group-de434f0695945">
  <label class="usa-label cfa-label" for="textarea-de434f0695945">
    <span>Please describe in as much detail as possible <abbr class="usa-hint usa-hint--required cfa-hint text-normal">(required)</abbr>
    </span>
  </label>
  <div>
    <textarea class="usa-textarea cfa-textarea" id="textarea-de434f0695945" name="textarea['de434f0695945']"></textarea>
  </div>
</div>

Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

{
  "modifier": "cfa-form-group",
  "id": "form-group-de434f0695945",
  "label": {
    "text": "Please describe in as much detail as possible <abbr class=\"usa-hint usa-hint--required cfa-hint text-normal\">(required)</abbr>",
    "for": "textarea-de434f0695945",
    "modifier": "cfa-label",
    "modifierHint": "cfa-hint"
  },
  "textarea": {
    "modifier": "cfa-textarea",
    "id": "textarea-de434f0695945",
    "name": "textarea['de434f0695945']"
  }
}
Form group with prefix and mask (U.S. Dollars)
Answer the best you can.

The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

<div class="usa-form-group cfa-form-group" id="2326f94c8167a">
  <label class="usa-label cfa-label" for="input-3f755fd4027b1">
    <span>How much does your household currently have in savings?</span>
  </label>
  <div class="usa-hint cfa-hint" id="hint-3f755fd4027b1">Answer the best you can.</div>
  <div>
    <div class="usa-input-group cfa-input-group">
      <div class="usa-input-prefix" aria-hidden="true">$</div>
      <input class="usa-input cfa-input text-end" type="text" id="input-3f755fd4027b1" name="input['3f755fd4027b1']" aria-describedby="hint-3f755fd4027b1" placeholder="0.00" inputmode="decimal" data-js="mask-dollars">
    </div>
  </div>
</div>

Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

{
  "modifier": "cfa-form-group",
  "id": "2326f94c8167a",
  "label": {
    "text": "How much does your household currently have in savings?",
    "for": "input-3f755fd4027b1",
    "modifier": "cfa-label",
    "modifierHint": "cfa-hint"
  },
  "hint": {
    "text": "Answer the best you can.",
    "modifier": "cfa-hint",
    "id": "hint-3f755fd4027b1"
  },
  "inputGroup": {
    "modifier": "usa-input-group cfa-input-group"
  },
  "input": {
    "modifier": "cfa-input text-end",
    "id": "input-3f755fd4027b1",
    "name": "input['3f755fd4027b1']",
    "ariaDescribedby": "hint-3f755fd4027b1",
    "type": "text",
    "prefixText": "$",
    "placeholder": "0.00",
    "inputmode": "decimal",
    "js": "mask-dollars"
  }
}
Form group with postfix
Answer the best you can.

The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

<div class="usa-form-group cfa-form-group" id="bc468ba4814dc">
  <label class="usa-label cfa-label" for="input-f5cf656efd2ec">
    <span>What percentage of your monthly income do you spend on monthly expenses? <abbr class="usa-hint usa-hint--required cfa-hint text-normal">(required)</abbr>
    </span>
  </label>
  <div class="usa-hint cfa-hint" id="hint-f5cf656efd2ec">Answer the best you can.</div>
  <div>
    <div class="usa-input-group cfa-input-group">
      <input class="usa-input cfa-input text-end" type="text" id="input-f5cf656efd2ec" name="input['f5cf656efd2ec']" aria-describedby="hint-f5cf656efd2ec" inputmode="decimal">
      <div class="usa-input-suffix" aria-hidden="true">%</div>
    </div>
  </div>
</div>

Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

{
  "modifier": "cfa-form-group",
  "id": "bc468ba4814dc",
  "label": {
    "text": "What percentage of your monthly income do you spend on monthly expenses? <abbr class=\"usa-hint usa-hint--required cfa-hint text-normal\">(required)</abbr>",
    "for": "input-f5cf656efd2ec",
    "modifier": "cfa-label",
    "modifierHint": "cfa-hint"
  },
  "hint": {
    "text": "Answer the best you can.",
    "modifier": "cfa-hint",
    "id": "hint-f5cf656efd2ec"
  },
  "inputGroup": {
    "modifier": "usa-input-group cfa-input-group"
  },
  "input": {
    "modifier": "cfa-input text-end",
    "id": "input-f5cf656efd2ec",
    "name": "input['f5cf656efd2ec']",
    "ariaDescribedby": "hint-f5cf656efd2ec",
    "type": "text",
    "postfixText": "%",
    "inputmode": "decimal"
  }
}
Form group with prefix and input mask (U.S. Phone)
We will use this number to contact your directly. If you do not add a phone number the processing of your application may be delayed.

The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

<div class="usa-form-group cfa-form-group" id="c8a31143dc0a7">
  <label class="usa-label cfa-label" for="input-71a18c0b011aa">
    <span>What's your phone number?</span>
  </label>
  <div class="usa-hint cfa-hint" id="hint-71a18c0b011aa">We will use this number to contact your directly. If you do not add a phone number the processing of your application may be delayed.</div>
  <div>
    <div class="usa-input-group cfa-input-group">
      <div class="usa-input-prefix" aria-hidden="true">+1</div>
      <input class="usa-input cfa-input" type="tel" id="input-71a18c0b011aa" name="input['71a18c0b011aa']" aria-describedby="hint-71a18c0b011aa" pattern="([0-9]{3}) [0-9]{3}-[0-9]{4}" inputmode="tel" data-js="mask-tel">
    </div>
  </div>
</div>

Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

{
  "modifier": "cfa-form-group",
  "id": "c8a31143dc0a7",
  "label": {
    "text": "What's your phone number?",
    "for": "input-71a18c0b011aa",
    "modifier": "cfa-label",
    "modifierHint": "cfa-hint"
  },
  "hint": {
    "text": "We will use this number to contact your directly. If you do not add a phone number the processing of your application may be delayed.",
    "modifier": "cfa-hint",
    "id": "hint-71a18c0b011aa"
  },
  "inputGroup": {
    "modifier": "usa-input-group cfa-input-group"
  },
  "input": {
    "modifier": "cfa-input",
    "id": "input-71a18c0b011aa",
    "name": "input['71a18c0b011aa']",
    "ariaDescribedby": "hint-71a18c0b011aa",
    "type": "tel",
    "pattern": "([0-9]{3}) [0-9]{3}-[0-9]{4}",
    "prefixText": "+1",
    "inputmode": "tel",
    "js": "mask-tel"
  }
}
Form group with input mask (SSN)

The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

<div class="usa-form-group cfa-form-group" id="2f3b84af29fc">
  <label class="usa-label cfa-label" for="input-8e29444330ae1">
    <span>What is your social security number?</span>
  </label>
  <div>
    <div>
      <input class="usa-input cfa-input" type="text" id="input-8e29444330ae1" name="input['8e29444330ae1']" pattern="[0-9]{3}-[0-9]{2}-[0-9]{4}" inputmode="numeric" data-js="mask-ssn">
    </div>
  </div>
</div>

Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

{
  "modifier": "cfa-form-group",
  "id": "2f3b84af29fc",
  "label": {
    "text": "What is your social security number?",
    "for": "input-8e29444330ae1",
    "modifier": "cfa-label",
    "modifierHint": "cfa-hint"
  },
  "input": {
    "modifier": "cfa-input",
    "id": "input-8e29444330ae1",
    "name": "input['8e29444330ae1']",
    "type": "text",
    "pattern": "[0-9]{3}-[0-9]{2}-[0-9]{4}",
    "inputmode": "numeric",
    "js": "mask-ssn"
  }
}
Form group with select
Answer the best you can. You will be able to include additional types of income.

The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section.

<div class="usa-form-group cfa-form-group" id="form-group-d6e9570b9a85c">
  <label class="usa-label cfa-label" for="select-d6e9570b9a85c">
    <span>What type of income have you had most recently? <abbr class="usa-hint usa-hint--required cfa-hint text-normal">(required)</abbr>
    </span>
  </label>
  <div class="usa-hint cfa-hint" id="hint-d6e9570b9a85c">Answer the best you can. You will be able to include additional types of income.</div>
  <div>
    <select class="usa-select cfa-select" id="select-d6e9570b9a85c" name="select['d6e9570b9a85c']" aria-describedby="hint-d6e9570b9a85c">
      <option selected="true">Click to select an income type</option>
      <option disabled="true">---</option>
      <option value="wages">wages, salaries, tips</option>
      <option value="self-employment">self-employment income</option>
      <option value="unemployment">unemployment benefits</option>
      <option value="cash-assistance">Cash Assistance grant</option>
      <option value="child-support">child support (received)</option>
      <option value="disability-medicaid">disability-related Medicaid</option>
      <option value="supplemental-security-income">Supplemental Security Income (SSI)</option>
      <option value="social-security-dependent">Social Security Dependent Benefits</option>
      <option value="social-security-disability">Social Security Disability Benefits</option>
      <option value="social-security-survivor">Social Security Survivor’s Benefits</option>
      <option value="social-security-retirement">Social Security Retirement Benefits</option>
      <option value="state-disability">State Disability Benefits</option>
      <option value="veteran">Veteran’s Pension or Benefits</option>
      <option value="pension">Government or Private Pension</option>
      <option value="deferred-comp">Withdrawals from Deferred Compensation (IRA, Keogh, etc.)</option>
      <option value="workers-comp">Worker’s Compensation</option>
      <option value="alimony">alimony (received)</option>
      <option value="boarder">boarder or lodger</option>
      <option value="gifts">gifts/contributions (received)</option>
      <option value="rental">rental income</option>
      <option value="investment">investment income (interest, dividends, and profit from selling stocks)</option>
    </select>
  </div>
</div>

Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section.

{
  "modifier": "cfa-form-group",
  "id": "form-group-d6e9570b9a85c",
  "label": {
    "text": "What type of income have you had most recently? <abbr class=\"usa-hint usa-hint--required cfa-hint text-normal\">(required)</abbr>",
    "for": "select-d6e9570b9a85c",
    "modifier": "cfa-label",
    "modifierHint": "cfa-hint"
  },
  "hint": {
    "text": "Answer the best you can. You will be able to include additional types of income.",
    "modifier": "cfa-hint",
    "id": "hint-d6e9570b9a85c"
  },
  "selectEl": {
    "modifier": "cfa-select",
    "id": "select-d6e9570b9a85c",
    "name": "select['d6e9570b9a85c']",
    "ariaDescribedby": "hint-d6e9570b9a85c",
    "default": {
      "label": "Click to select an income type",
      "selected": "true"
    },
    "options": [
      {
        "label": "---",
        "disabled": "true"
      },
      {
        "value": "wages",
        "label": "wages, salaries, tips"
      },
      {
        "value": "self-employment",
        "label": "self-employment income"
      },
      {
        "value": "unemployment",
        "label": "unemployment benefits"
      },
      {
        "value": "cash-assistance",
        "label": "Cash Assistance grant"
      },
      {
        "value": "child-support",
        "label": "child support (received)"
      },
      {
        "value": "disability-medicaid",
        "label": "disability-related Medicaid"
      },
      {
        "value": "supplemental-security-income",
        "label": "Supplemental Security Income (SSI)"
      },
      {
        "value": "social-security-dependent",
        "label": "Social Security Dependent Benefits"
      },
      {
        "value": "social-security-disability",
        "label": "Social Security Disability Benefits"
      },
      {
        "value": "social-security-survivor",
        "label": "Social Security Survivor’s Benefits"
      },
      {
        "value": "social-security-retirement",
        "label": "Social Security Retirement Benefits"
      },
      {
        "value": "state-disability",
        "label": "State Disability Benefits"
      },
      {
        "value": "veteran",
        "label": "Veteran’s Pension or Benefits"
      },
      {
        "value": "pension",
        "label": "Government or Private Pension"
      },
      {
        "value": "deferred-comp",
        "label": "Withdrawals from Deferred Compensation (IRA, Keogh, etc.)"
      },
      {
        "value": "workers-comp",
        "label": "Worker’s Compensation"
      },
      {
        "value": "alimony",
        "label": "alimony (received)"
      },
      {
        "value": "boarder",
        "label": "boarder or lodger"
      },
      {
        "value": "gifts",
        "label": "gifts/contributions (received)"
      },
      {
        "value": "rental",
        "label": "rental income"
      },
      {
        "value": "investment",
        "label": "investment income (interest, dividends, and profit from selling stocks)"
      }
    ]
  }
}

Guidance

Form groups vs. Fieldsets. Form questions with one form element, such as a text input, text area, or select, may use the form group component to associate the form element with a question (or label element). Use the fieldset component to associate multiple form elements with the same question, such as multi-part text inputs, checkboxes, or radio buttons.

Text inputs. Refer to text input documentation.

Textareas. Refer to textarea documentation.

Select. Refer to select documentation.

Accessibility

  • Unchecked
    Customization to the visual appearance of the Form group has been verified for WCAG 2.1 AA contrast minimum success.
  • Unchecked
    The Form group examples pass manual audits (WCAG 2.1 AA using axe or Lighthouse).
  • Unchecked
    The Form group achieves WCAG 2.1 AA resizing success.
    Resizing text up to 200% without loss of content or functionality.
  • Unchecked
    The Form group passes keyboard interaction tests.
    No keyboard test has been created.
  • Unchecked
    The Form group passes screen reader interaction tests.

  • Unchecked
    Guidance on ensuring Form group accessibility has been provided in this documentation.

Checklist Key

  • Passes
    Passes
  • Unchecked
    Unchecked

Design library component

Source and usage

Package: @codeforamerica/uswds/packages/cfa-form-group

  • Sass stylesheet: ./_cfa-form-group.scss
  • Thymeleaf template fragment: ./cfa-form-group.th.html
  • Embedded Ruby (ERB) partial template: ./_cfa-form-group.html.erb
  • JavaScript provides custom input masking support utilizing the open source library Cleave.js. Guidance on individual module loading will added. Currently, there is one script that imports all modules. The source is located at @codeforamerica/js/index.js. This entrypoint is compiled using Rollup.js and distributed to @codeforamerica/dist/js/default.js.
Packages are collections of functionality that make up a component. Typically, they include stylesheets, templates, and scripts. Learn more about packages on the USWDS documentation site.
Sass theme settings

Below is a demonstration of customizing the component theme settings. Refer to the theme and package-level settings documentation.

// Theme-level settings
@use 'cfa-uswds-theme' with (
  // Global theme settings that affect the component, changing these will affect other components
  $cfa-color-error-dark: 'orange-warm-60v' // Affects the error state border color
);
Thymeleaf template fragment

This is the pre-rendered template fragment from the package. It is the same template used to render the demonstrations above. You may copy and paste from this example or use the template using the th:block th:replace tag. See the example below.

<div th:fragment="formGroup(modifier, id, label, input, textarea, selectEl, hint, error, inputGroup)" class="usa-form-group" th:classappend="${modifier}" th:attr="id=${id}">
  <label class="usa-label" th:classappend="${label.modifier}" th:attr="id=${label.id},for=${label.for},tabindex=${label.tabindex}">
    <span th:utext="${label.text}">Label</span>
    <abbr th:if="${input.required}" aria-hidden="true" class="usa-hint usa-hint--required" th:classappend="${label.modifierHint}">*</abbr>
    <abbr th:if="${textarea.required}" aria-hidden="true" class="usa-hint usa-hint--required" th:classappend="${label.modifierHint}">*</abbr>
    <abbr th:if="${selectEl.required}" aria-hidden="true" class="usa-hint usa-hint--required" th:classappend="${label.modifierHint}">*</abbr>
  </label>
  <div th:if="${hint}" class="usa-hint" th:classappend="${hint.modifier}" th:attr="id=${hint.id}" th:utext="${hint.text}">Hint</div>
  <span th:if="${error}" class="usa-error-message" th:classappend="${error.modifier}" th:attr="id=${error.id},role=${error.role},aria-live=${error.ariaLive}" th:utext="${error.text}">Message</span>
  <div th:if="${input}">
    <th:block th:replace="~{packages/cfa-input/cfa-input.th :: input(${input}, ${inputGroup})}" />
  </div>
  <div th:if="${textarea}">
    <th:block th:replace="~{packages/cfa-textarea/cfa-textarea.th :: textarea(${textarea})}" />
  </div>
  <div th:if="${selectEl}">
    <th:block th:replace="~{packages/cfa-select/cfa-select.th :: select(${selectEl})}" />
  </div>
</div>
Template fragment inclusion

Below is an example of how to use the fragment from the package directory using the th:block th:replace inclusion tag. Replace the fragment parameters using your variables or context.

<th:block th:replace="~{packages/cfa-form-group/cfa-form-group.th :: formGroup(${modifier}, ${id}, ${label}, ${input}, ${textarea}, ${selectEl}, ${hint}, ${error}, ${inputGroup})}" />
ERB template partial

This is the pre-rendered partial template from the package. You may copy and paste from this example or use the template directly from the path.

<div class="usa-form-group<% if defined?(modifier) %> <%= modifier %><% end %>"
  <% if defined?(id) %> id="<%= id %>"<% end %>>
  <label class="usa-label<% if label['modifier'] %> <%= label['modifier'] %><% end %>"<% if label['id'] %> id="<%= label['id'] %>"<% end %><% if label['for'] %> for="<%= label['for'] %>"<% end %><% if label['tabindex'] %> tabindex="<%= label['tabindex'] %>"<% end %>>
    <span><%= label['text'] %></span>
    <% if defined?(input) && input['required'] %><abbr aria-hidden="true" class="usa-hint usa-hint--required<% if label['modifierHint'] %> <%= label['modifierHint'] %><% end %>">*</abbr><% end %>
    <% if defined?(textarea) && textarea['required'] %><abbr aria-hidden="true" class="usa-hint usa-hint--required<% if label['modifierHint'] %> <%= label['modifierHint'] %><% end %>">*</abbr><% end %>
    <% if defined?(selectEl) && selectEl['required'] %><abbr aria-hidden="true" class="usa-hint usa-hint--required<% if label['modifierHint'] %> <%= label['modifierHint'] %><% end %>">*</abbr><% end %>
  </label>
  <% if defined?(hint) %><div class="usa-hint<% if hint['modifier'] %> <%= hint['modifier'] %><% end %>"<% if hint['id'] %> id="<%= hint['id'] %>"<% end %>><%= hint['text'] %></div><% end %>
  <% if defined?(error) %><span class="usa-error-message<% if error['modifier'] %> <%= error['modifier'] %><% end %>"<% if error['id'] %> id="<%= error['id'] %>"<% end %><% if error['role'] %> role="<%= error['role'] %>"<% end %><% if error['ariaLive'] %> aria-live="<%= error['ariaLive'] %>"<% end %>><%= error['text'] %></span><% end %>
  <% if defined?(input) %>
    <%= ERB.new(File.read('packages/cfa-input/_cfa-input.html.erb'), 0, 0, '@input')
      .result_with_hash({
        input: input,
        inputGroup: (inputGroup if defined?(inputGroup))
      }.compact) %>
  <% end %>
  <% if defined?(textarea) %>
    <%= ERB.new(File.read('packages/cfa-textarea/_cfa-textarea.html.erb'), 0, 0, '@textarea').result_with_hash({textarea: textarea}) %>
  <% end %>
  <% if defined?(selectEl) %>
    <%= ERB.new(File.read('packages/cfa-select/_cfa-select.html.erb'), 0, 0, '@select').result_with_hash({selectEl: selectEl}) %>
  <% end %>
</div>
Partial render

Below is an example of how to include the partial in a view from the package directory using the Ruby ERB class. Replace the argument values using your variables or context. In a Rails environment, the render method can be used instead with the same hash values.

<%= ERB.new(File.read('packages/cfa-form-group/_cfa-form-group.html.erb'), 0, 0, '@formGroup').result_with_hash({modifier: modifier, id: id, label: label, hint: hint, error: error, input: input, textarea: textarea, selectEl: selectEl}) %>

uswds.codeforamerica.org

Learn more about Code for America by visiting codeforamerica.org