Form Element

Form Element

An HTML form element contains a HTML label and element

Base

Preview

No content has been added for this component.

No content has been added for this component.

About Form Element

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.

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.

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-element
Summary

Creates layout for a form element

Restrictdiv, fieldset, li
VariantTrue
Selector.slds-has-error
Summary

Error styles for checkbox or checkbox group

Restrict.slds-form-element
ModifierTrue
Selector.slds-form-element__control
Summary

Wrapper to any form display element

Restrict.slds-form-element div
Selector.slds-form-element__icon
Summary

When an icon sits within a form element wrapper and adjacent to another element inside that wrapper such as a .form-element__label

Restrict.slds-form-element div
Selector.slds-form-element__help
Summary

Creates inline help styles, sits below .form-element__control

Restrict.slds-form-element div
Selector.slds-required
Summary

Required Star

Restrict.slds-form-element abbr, abbr
Selector.slds-input-has-icon
Summary

Modifier if text input has svg icon adjacent to input

Restrict.slds-form-element div
Selector.slds-input__icon
Summary

Hook for .slds-input-has-icon

Restrict.slds-input-has-icon svg, .slds-input-has-icon button
Selector.slds-input__icon_left
Summary

Hook for .slds-input-has-icon--left-right

Restrict.slds-input__icon
Selector.slds-input__icon_right
Summary

Hook for .slds-input-has-icon_left-right

Restrict.slds-input__icon
Selector.slds-input-has-icon_left
Summary

Positions .slds-input__icon to the left of the text input

Restrict.slds-input-has-icon
ModifierTrue
Selector.slds-input-has-icon_right
Summary

Positions .slds-input__icon to the right of the text input

Restrict.slds-input-has-icon
ModifierTrue
Selector.slds-input-has-icon_left-right
Summary

Positions .slds-inputicon_left to the left of the text input and .slds-inputicon_right to the right of the text input

Restrict.slds-input-has-icon
ModifierTrue
Selector.slds-input__icon-group
Summary

Positions two items (icons and/or spinners) on one side or the other of the input

Restrict.slds-input-has-icon div
Selector.slds-input__icon-group_right
Summary

Positions the close icon and spinner on the right side of the input while searching

Restrict.slds-input__icon-group
ModifierTrue
Selector.slds-input-has-fixed-addon
Summary

Use on input container to let it know there is fixed text to the left or right of the input

Restrict.slds-form-element .slds-form-element__control
Selector.slds-form-element__addon
Summary

Fixed text that sits to the left or right of an input

Restrict.slds-form-element span
Selector.slds-form-element__static
Summary

Initializes read-only form element

Restrict.slds-form-element span, .slds-form-element div
Selector.slds-form-element__static_edit
Summary

Inline Edit on static form element

Restrict.slds-form-element__static
Selector.slds-radio_button
Summary
Restrict.slds-radio_button-group span
Selector.slds-radio_faux
Summary

Create styled button when adjacent to the input[radio] element

Restrict.slds-radio_button span
Selector.slds-radio_button__label
Summary

Label element inside of a radio button

Restrict.slds-radio_button label