Form Layout

Form Layout

An HTML form contains interactive controls to submit information to a web server.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<div class="slds-form slds-form_stacked">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="input-id-01">Text Input</label>
    <div class="slds-form-element__control">
      <input type="text" id="input-id-01" class="slds-input" placeholder="Placeholder Text" />
    </div>
  </div>
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="input-id-02">Textarea Label</label>
    <div class="slds-form-element__control">
      <textarea id="input-id-02" class="slds-textarea" placeholder="Placeholder Text"></textarea>
    </div>
  </div>
  <fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
    <div class="slds-form-element__control">
      <span class="slds-checkbox">
        <input type="checkbox" name="default" id="checkbox-285" />
        <label class="slds-checkbox__label" for="checkbox-285">
          <span class="slds-checkbox_faux"></span>
          <span class="slds-form-element__label">All opportunities owned by you</span>
        </label>
      </span>
      <span class="slds-checkbox">
        <input type="checkbox" name="default" id="checkbox-286" />
        <label class="slds-checkbox__label" for="checkbox-286">
          <span class="slds-checkbox_faux"></span>
          <span class="slds-form-element__label">All contacts in the account owned by you</span>
        </label>
      </span>
    </div>
  </fieldset>
  <fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
    <div class="slds-form-element__control">
      <span class="slds-radio">
        <input type="radio" id="radio-287" name="options" />
        <label class="slds-radio__label" for="radio-287">
          <span class="slds-radio_faux"></span>
          <span class="slds-form-element__label">Lead Generation</span>
        </label>
      </span>
      <span class="slds-radio">
        <input type="radio" id="radio-288" name="options" />
        <label class="slds-radio__label" for="radio-288">
          <span class="slds-radio_faux"></span>
          <span class="slds-form-element__label">Education Leads</span>
        </label>
      </span>
    </div>
  </fieldset>
</div>

About Form Layout

To vertically stack <label> and <input> pairs, place .slds-form--stacked on the wrapper of the form for optimal spacing.

To horizontally align a <label> and <input>, use the .slds-form--horizontal class on the wrapper around the form. A .slds-form-element__label takes up 33% of the width, and the .slds-form-element__control uses the remaining 66%.

For optimum spacing and layout, wrap each element in .slds-form-element. Layout helper classes are available through the following class names, .slds-form--stacked, .slds-form--horizontal and .slds-form--inline.

The read-only state is for form elements that can’t be modified. It is used for small, non-editable form fields that sit next to inputs and allows the size and height to align. It is not meant for large paragraphs of text.

Because the read-only field state has no <input>, don’t use a <label> to provide better accessibility for screen readers and keyboard navigators. Instead, use a <span> with the .slds-form-element__label class. Instead of an <input>, use the .slds-form-element__static class inside the .slds-form-element__control wrapper.

Error states alert the user when content in the form is invalid. The .slds-has-error class is placed on the <div class="slds-form-element">. Place the error message for the user in a <span> with the .slds-form-element__help class.

The native form elements, <input>, <textarea>, <select>, <input type='checkbox'>, and <input type='radio'>, receive validation styling for disabled, checked, and checked disabled, if applicable.

Accessibility

Every field requires an associated, non-empty <label> element. The label should have a for attribute that references the id of the field. For example, <label for="emailAddress">Enter email address:</label> and <input id="emailAddress">. This association ensures that assistive technology informs users what information to enter where.

If the field is required, the <input> element should have the HTML attribute required or required="". Similarily, if it is disabled, it should have the disabled or disabled="" attribute. Do not use true/false values inside the required or disabled because the mere presence of these attributes signifies the field is required or disabled.

If the field is invalid and displays an error message, the <input> element should have an aria-describedby attribute that references the id of the error message. This configuration allows screen readers to read the associated error message when the invalid field is focused.


Overview of CSS Classes

Selector.slds-form
Summary
Restrictform, div, fieldset
VariantTrue
Selector.slds-form_inline
Summary

Horizontally align multiple form elements on the same axis

Restrict.slds-form
Selector.slds-form_compound
Summary

Creates a form that consists of multiple form groups

Restrict.slds-form
VariantTrue
Selector.slds-form_stacked
Summary

Vertically aligns form label and control, provides spacing between form elements

Restrict.slds-form:not(.slds-form_compound)
ModifierTrue
Selector.slds-form_horizontal
Summary

Horizontally aligns a single form label and control on the same line

Restrict.slds-form:not(.slds-form_compound)
ModifierTrue