USWDS - How to align form labels to the left of inputs?

52
February 17, 2021, at 05:40 AM

I'm using the U.S. Web Design System (USWDS) in a project I'm working on, and I'm struggling with something that seems superficially like it should be quite simple: How can I align form labels so they appear to the left of their corresponding inputs, instead of above them?

Some other CSS libraries call this a horizontal form but I've also seen it referred to as "inline" fields.

According to this answer it's possible to achieve the result I want using modern CSS Grid layout, but so far I haven't figured out how to make that play nicely with the USWDS styling, which does not use CSS Grid.

Can anyone help me to either:

  • Create a horizontal form using some combination of USWDS components and utility classes, or if that's impractical...
  • Produce a horizontal form by overriding the USWDS styling with custom CSS, but without causing too much conflict or breaking with the standard?

Below is a simplified snippet of my HTML:

<link href="https://cdn.jsdelivr.net/npm/uswds@2.8.0/dist/css/uswds.min.css" rel="stylesheet" />

<form class="usa-form">
    <div class="usa-form-group">
        <label class="usa-label" for="somefield1">Sample label</label>
        <input class="usa-input" type="number" name="somefield1" value=0 />
    </div>
    <div class="usa-form-group">
        <label class="usa-label" for="somefield2">Another label</label>
        <input class="usa-input" type="number" name="somefield2" value=0 />
    </div>
</form>

READ ALSO
How to display the date field in input box after submitting the form in javascript?

How to display the date field in input box after submitting the form in javascript?

I need to display the user-selected date in the input box on the same page once the form gets submittedI was referring this link and if I try to implement the same in my code, my form is not getting submitted and am not able to see the desired output

42
BMI Calculator program with Tkinter()

BMI Calculator program with Tkinter()

I want to create a BMI calculator program with Tkinter but I'm stuck at calculation procedure I use StringVar() to keep user data to calculate but I don't know how to calculate

50
Multi level product flavors in buildVariant in Android

Multi level product flavors in buildVariant in Android

Our app has default buildtypes and productflavors as

71
Can someone help me spot my error, I can&#39;t find it and it won&#39;t render [closed]

Can someone help me spot my error, I can't find it and it won't render [closed]

Want to improve this question? Update the question so it's on-topic for Stack Overflow

51