18F/web-design-standards

<div class="padding-2">
  <form class="usa-form padding-x-2 padding-bottom-2 padding-top-1px bg-base-lightest radius-md maxw-none">
    {% include '@components/usa-combo-box/src/usa-combo-box.twig' with {
      'label': 'Default combo box in a usa-form',
      'name': 'fruit',
      'id': 'fruit'
    } %}

    {% include '@components/usa-combo-box/src/usa-combo-box.twig' with {
      'modifier': 'width-tablet maxw-none',
      'label': 'Override combo box with utilities',
      'name': 'more-fruit',
      'id': 'more-fruit'
    } %}
  </form>

  {% include '@components/usa-combo-box/src/usa-combo-box.twig' with {
    'modifier': 'width-tablet maxw-none',
    'label': 'Not in a usa-form element',
    'name': 'even-more-fruit',
    'id': 'even-more-fruit'
  } %}

  {% include '@components/usa-combo-box/src/usa-combo-box.twig' with {
    'modifier': 'width-full maxw-none',
    'label': 'Not in a usa-form element, custom width utilities',
    'name': 'even-more-more-fruit',
    'id': 'even-more-more-fruit'
  } %}
</div>