# Form Label: Invalid

Ready

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

`

    <label class="form-label form-label--invalid">Example</label>

`
`

    <label class="form-label form-label--invalid">Example</label>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .form-label {
        @extend %heading-font-regular;

        display: block;
        width: 100%;
        font-size: $font-size-base;
        color: $form-label-color;

        &--emphasized {
          @extend %heading-font-bold;
        }

        &--invalid {
          color: $form-label-invalid-color;
        }

        // Mute labels in next to disabled form-controls
        &.form-label--disabled,
        .form-control__input:disabled ~ & {
          cursor: not-allowed;
          color: $checkbox-color-disabled;
        }
      }

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

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

No notes defined.