Skip to content

USWDS - Forms: Form group error left border only viewable on wide widths #5998

@mahoneycm

Description

@mahoneycm

Description

The red border added to usa-form-group--error divs has a negative margin of -2.5 units. This is equal to the border size + its padding so it causes the margin to be pushed off screen unless the user has added additional padding to its parent element.

This error border helps to signify the form's error state and should be maintained in desktop views.

Steps to reproduce the issue

  1. Visit form error state storybook preview
  2. Resize the window from horizontally
  3. In smaller views, the error border will be visible
  4. In wider views, the error border will be pushed out of view.

Additional information

Related code

// Block input elements
.usa-form-group--error {
@include u-border-left(0.5, "error-dark");
margin-top: units(4);
padding-left: units(2);
position: relative;
@include at-media("desktop") {
margin-left: units(-2.5);
}
}

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Done

Relationships

None yet

Development

No branches or pull requests

Issue actions