# Form Group: Default

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div>
        <div class="form-group">
            <label class="form-label" for="input1">Email</label>
            <input class="form-control" type="email" placeholder="arnulf@beckenbauer.com" id="input1" />
            <small class="form-text">I'm a helpful message</small>
        </div>
    </div>

`
`

    <div>
        <div class="form-group">
            <label class="form-label" for="input1">Email</label>
            <input class="form-control" type="email" placeholder="arnulf@beckenbauer.com" id="input1" />
            <small class="form-text">I'm a helpful message</small>
        </div>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .form-group {
        > * + * {
          margin-top: $spacer-xxs;
        }

        &--invalid {
          .form-label,
          .form-text {
            color: $form-label-invalid-color;
          }

          .form-control {
            border-color: $form-control-invalid-border-color;
          }
        }
      }

  `
- URL: /components/raw/form-group/_form-group.scss
- Filesystem Path: components/05-atoms/form-elements/form-group/_form-group.scss
- Size: 244 Bytes

- Handle: @form-group--default
- Variants (2): Default , Invalid
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/form-elements/form-group/form-group.html

No notes defined.