Form group

Used to group form labels and controls and provide structure and consistent spacing within a form.

Form group

draft 
<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group">
            <label class="ds-label" for="email">Email</label> 
            <input class="ds-text-input" type="text" class="text-input" id="email" name="email" placeholder="name@example.com"/>
        </div>
        
    </form>

</div>

Form group --inline

draft

An inline form group. USE WITH CAUTION: inline labels are proven to be less usable.

<div class="ds-block">

    <form class="ds-form">

        <div class="ds-form-group ds-form-group--inline">
            <label class="ds-label" for="email">Email</label> 
            <input class="ds-text-input" type="text" class="text-input" id="email" name="email" placeholder="name@example.com"/>
        </div>
        
    </form>

</div>