CODEWITHSUNDEEP
cssformsalignmentstylinguswds
bjmc
bjmc

Reputation: 3292

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

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:

Below is a simplified snippet of my HTML:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 0

Views: 204

Answers (1)

frdwhite24
frdwhite24

Reputation: 36

You can use flex on the usa-form-group to get them positioned next to each other as shown in this Code Sandbox, with some other minor touchups to the element margins https://codesandbox.io/s/nostalgic-moon-q7i7f?file=/styles.css

Upvotes: 2

Related Questions