A Form Element contains an HTML input element paired with a label.

* Form Label

About Form Elements#

The Form Element is initialized with slds-form-element and is made up of three primary pieces; a label (slds-form-element__label), a form control container (slds-form-element__control), and a form input element, i.e. <input>.

Form Label#

A form label should use either the <label> or <legend> elements with the class slds-form-element__label. Use <legend> when you have a compound form.

<label class="slds-form-element__label" for="unique-id-of-input">Form label</label>

Form Control#

A form control is a div with the class slds-form-element__control. The control is required to maintain the structure of the Form Element.

<div class="slds-form-element__control">Any form type goes here</div>

Form Input Elements#

There are many types of input elements that can be used in the Form Element, including inputs, text areas, checkboxes, and radio buttons. Visit the individual component pages for in-depth details of their specific states and visuals.

Accessibility#

Labels must have the for attribute applied, and its value must match the ID of the associated form element, like <input id="unique-id-of-input" />. This association ensures that assistive technology informs users about what information to enter where.

Mobile#

On mobile devices, such as phones and other devices that have touch as the primary method of interaction, form elements will have an increased size of label and info icon.
Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in Salesforce native mobile applications. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.

Select a device to set the width of the example

Base#

Form Label

<div class="slds-form-element">
  <label class="slds-form-element__label" for="form-element-01">Form Label</label>
  <div class="slds-form-element__control">
    <input type="text" id="form-element-01" placeholder="Placeholder text…" class="slds-input" />

States#

View Mode/Static#

If a form element requires a view mode or static state, instead of slds-form-element__label being a <label> element, we want to change the element to a <span>. This is because the form is no longer a form but a statically read name and value pair.

The string inside of slds-form-element__control needs to be wrapped in a <div> as well, with the class slds-form-element__static applied to it.

In addition to the structural changes — if the form element is standalone, you can optionally apply slds-form-element__readonly. The class will help spacing and separation between other form elements. This class is required if the form element is in the context of a larger form composition.

Status

In Progress

<div class="slds-form-element slds-form-element_readonly">
  <span class="slds-form-element__label">Status</span>
  <div class="slds-form-element__control">
    <div class="slds-form-element__static">In Progress</div>

Inline Edit#

If the form element has inline editable capabilities, the form element will require the class slds-form-element_edit. This will apply styles that help handle the structure of the additional elements, such as the button icon to switch the element out of view mode and into edit mode.

In addition, we want to provide an interaction hint by increasing the contrast of the button icon on hover by adding slds-hint-parent to the form element. The button icon will also require the class slds-button__icon_hint. This will notify the form element that this is the element we want to provide an interaction hint for. For more implementation details, please refer to Button icon with hint on hover

Status

In Progress

<div class="slds-form-element slds-form-element_edit slds-form-element_readonly slds-hint-parent">
  <span class="slds-form-element__label">Status</span>
  <div class="slds-form-element__control">
    <div class="slds-form-element__static">In Progress</div>

Help Text Icon#

A form element can have help text that will display in a tooltip when hovering or focusing on an icon.

The icon comes in the form of a button icon so it can receive focus when a user tabs through a form with multiple form elements.

The button icon is required to be wrapped in a <div> with the class slds-form-element__icon and should be placed outside of the <label> element.

Status

<div class="slds-form-element">
  <label class="slds-form-element__label" for="form-element-help-01">Status</label>
  <div class="slds-form-element__icon">
    <button class="slds-button slds-button_icon">

Mobile context changes
Please be aware that in a mobile context form elements with a help text icon will automatically change slightly as shown in the example below. For more details please see the mobile specific documentation above.

Select a device to set the width of the example

The help text icon uses a tooltip to show the help text information. Please see Tooltips for implementation details.

Status

<div class="slds-form-element">
  <label class="slds-form-element__label" for="tooltip-showing-form-element-help-01">Status</label>
  <div class="slds-form-element__icon">
    <button class="slds-button slds-button_icon" aria-describedby="help">

Feedback#

A form element can have various methods of feedback, such as a required denotation or an inline error message.

Required#

When a form element is required, an <abbr> should be injected before the <input> and within the <label> and have the class slds-required.

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

* Form Label

<div class="slds-form-element">
  <label class="slds-form-element__label" for="form-element-03">
    <abbr class="slds-required" title="required">* </abbr>Form Label</label>
  <div class="slds-form-element__control">

Error#

If an error has occurred while submitting a form, the form element with an error should provide feedback. The slds-has-error class is placed on the <div class="slds-form-element"> element. Then, the error message for the user is placed in a <div> with the slds-form-element__help class.

Accessibility requirement
When a form element displays feedback notifying the user of an error, the error string should be linked to the element by adding the aria-describedby attribute to the <input>. The `aria-describedby` attribute must reference the id of the error message. This configuration allows screen readers to read the associated error message when the invalid field is focused.

* Form Label

Enter a value.

<div class="slds-form-element slds-has-error">
  <label class="slds-form-element__label" for="form-element-05">
    <abbr class="slds-required" title="required">* </abbr>Form Label</label>
  <div class="slds-form-element__control">

Layout Variations#

If your form has more than one form element, you can switch the direction of slds-form-element__label and slds-form-element__control by applying slds-form-element_stacked for stacked labels and slds-form-element_horizontal for left-aligned labels. For optimal spacing and layout, ensure the slds-form-element class is present on each element within the form.

Stacked#

To vertically stack <label> and <input> pairs, place slds-form-element_stacked on the div with the class of slds-form-element for optimal spacing.

Text Input

Textarea Input

Checkbox Group Label

All opportunities owned by you

All contacts in the account owned by you

Radio Group Label

Lead generationEducation leads

<div class="slds-form">
  <div class="slds-form-element slds-form-element_stacked">
    <label class="slds-form-element__label" for="stacked-input-id-01">Text Input</label>
    <div class="slds-form-element__control">

Horizontal#

To horizontally align a <label> and <input>, use the slds-form-element_horizontal class on the div with the class of slds-form-element. The slds-form-element__label takes up 33% of the width, and the slds-form-element__control uses the remaining 66%.

Text Input

Textarea Input

Checkbox Group Label

All opportunities owned by you

All contacts in the account owned by you

Radio Group Label

Lead generationEducation leads

<div class="slds-form">
  <div class="slds-form-element slds-form-element_horizontal">
    <label class="slds-form-element__label" for="horizontal-input-id-01">Text Input</label>
    <div class="slds-form-element__control">

Single Column Support#

When using slds-form-element_horizontal, you might find that the 33/66% distribution of the label to control might be too much in a single column form when displayed in a larger region. Another scenario where single column support would be useful is when a form element spans 100% while the other form elements in your form are 50/50 split. To reduce the distribution and/or align with 50/50 split form elements, adding the class slds-form-element_1-col to slds-form-element will re-distribute the layout.

Standalone#

Description

<div class="slds-form-element slds-form-element_horizontal slds-is-editing slds-form-element_1-col">
  <label class="slds-form-element__label" for="single-form-element-id-01">Description</label>
  <div class="slds-form-element__control">
    <textarea id="single-form-element-id-01" placeholder="Placeholder text…" class="slds-textarea">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.</textarea>

With 50/50 split#

Label

Description

<div class="slds-form" role="list">
  <div class="slds-form__row">
    <div class="slds-form__item" role="listitem">
      <div class="slds-form-element slds-form-element_horizontal slds-is-editing">

Error state#

When in the horizontal layout, error messages will appear underneath the related input.

Assigned To

Team Name

* Account Name

Complete this field

Description

<div class="slds-form" role="list">
  <div class="slds-form__row">
    <div class="slds-form__item" role="listitem">
      <div class="slds-form-element slds-form-element_horizontal slds-is-editing">

Compound#

A compound form is a grouping of several form elements described by a label/title. The compound form should be implemented as a <fieldset>, where the label/title is implemented as a <legend> element.

The <fieldset> requires the class slds-form-element_compound. This class handles the layout and wrapping of the form elements that are grouped together.

The <legend> element requires the class slds-form-element__legend. Legend elements can only accept a limited amount of CSS properties so this class is there to help manage its layout.

<fieldset class="slds-form-element slds-form-element_compound">
  <legend class="slds-form-element__legend slds-form-element__label">Fieldset Label</legend>
  <div class="slds-form-element__control">...</div>
</fieldset>

Rows#

Each row of a compound field should be wrapped in a <div> with the class slds-form-element__row.

Fields#

Each field inside of a compound row can be explicitly sized by using a sizing class, e.g. slds-size_1-of-2.

<div class="slds-form-element__row">
  <div class="slds-size_1-of-2">...</div>
</div>

Location

Latitude

Longitude

<fieldset class="slds-form-element slds-form-element_compound">
  <legend class="slds-form-element__legend slds-form-element__label">Location</legend>
  <div class="slds-form-element__control">
    <div class="slds-form-element__row">

Address#

Though an address form is utilizing the slds-form-element_compound class, we need to also add the slds-form-element_address class to the component. We modify some of the behavior of an address form with this class.

Billing Address

Billing Street

Billing City

Billing State/Province

Billing Zip/Postal Code

Billing Country

<fieldset class="slds-form-element slds-form-element_compound slds-form-element_address">
  <legend class="slds-form-element__legend slds-form-element__label">Billing Address</legend>
  <div class="slds-form-element__control">
    <div class="slds-form-element__row">

Usage Examples#

Record Form#

A record form is a series of rows created by slds-form__row. Inside of each row contains up to 2 inline-editable form element. Each item inside of slds-form__row is required to be wrapped in a <div> with the class slds-form__item.

Accessibility Requirement
Due to the nature of how the record form is composed, we need to notify screen readers that this is a list by adding role="list" to the slds-form element. Every column inside of each row should get role="listitem" to identify itself as items of the list.

View Mode#

When in view/readonly mode, it is required to have the class slds-form-element_readonly on the slds-form-element element. This class will provide styles for scanability and spacing.

If inline-edit mode is enabled, you will also need to add slds-form-element_edit to the slds-form-element to accommodate the space for the edit button icon.

Stacked Alignment#

When you want the form elements inside of your record form to be stacked. Each slds-form-element should also get the class slds-form-element_stacked.

* Assigned To

Jack Rogers

Team Name

Salesforce Lightning Design System

Security Assessment Required?

False

Status

Personalization Settings

Disable end user personalization

SLA Serial Number

5367

SLA Expiration Date

1/1/2018

Location

10.283, 54.293

Selected Languages

Arabic, Chinese, English, German

* Billing Address

525 S. Lexington Ave
Burlington, NC 27215
USA

Shipping Address

312 Constitution Place
Austin, TX 78767
USA

Description

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.

<div class="slds-form" role="list">
  <div class="slds-form__row">
    <div class="slds-form__item" role="listitem">
      <div class="slds-form-element slds-form-element_edit slds-form-element_readonly slds-form-element_stacked slds-hint-parent">

Horizontal Alignment#

By adding the class slds-form-element_horizontal to every slds-form-element, your form can switch from stacked to left-aligned, horizontal labels in order to reduce vertical space.

* Assigned To

Jack Rogers

Team Name

Salesforce Lightning Design System

Security Assessment Required?

False

Status

Personalization Settings

Disable end user personalization

SLA Serial Number

5367

SLA Expiration Date

1/1/2018

Description

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod.

Location

10.283, 54.293

Selected Languages

Arabic, Chinese, English, German

* Billing Address

525 S. Lexington Ave
Burlington, NC 27215
USA

Shipping Address

312 Constitution Place
Austin, TX 78767
USA

<div class="slds-form" role="list">
  <div class="slds-form__row">
    <div class="slds-form__item" role="listitem">
      <div class="slds-form-element slds-form-element_edit slds-form-element_readonly slds-form-element_horizontal slds-hint-parent">

Edit Mode#

When a form switches to edit mode, we need to replace all readonly form elements with their semantic field type form element. The structure remains the same:

<div class="slds-form-element">
  <label class="slds-form-element__label" for="unique-form-element-id">My Label</label>
  <div class="slds-form-element__control">...</div>
</div>

The form content found inside of slds-form-element__control should be replaced with the appropriate field type of the view/readonly state.

Stacked Alignment#

* Assigned To

Team Name

Security Assessment Required?

Status

App Personalization Settings

Disable end user personalization

Don't automatically create temporary tabs

SLA Serial Number

Location

Longitude

Latitude

Select Options

Press space bar when on an item, to move it within the list. Cmd/Ctrl plus left and right arrow keys, to move items between lists.

First Category

Second Category

* Billing Address

Billing Street

Billing City

Billing State/Province

Billing Zip/Postal Code

Billing Country

Shipping Address

Shipping Street

Shipping City

Shipping State/Province

Shipping Zip/Postal Code

Shipping Country

Description

<div class="slds-form" role="list">
  <div class="slds-form__row">
    <div class="slds-form__item" role="listitem">
      <div class="slds-form-element slds-form-element_stacked slds-is-editing">

Horizontal Alignment#

* Assigned To

Team Name

Security Assessment Required?

Status

App Personalization Settings

Disable end user personalization

Don't automatically create temporary tabs

SLA Serial Number

Description

Location

Longitude

Latitude

Select Options

Press space bar when on an item, to move it within the list. Cmd/Ctrl plus left and right arrow keys, to move items between lists.

First Category

Second Category

* Billing Address

Billing Street

Billing City

Billing State/Province

Billing Zip/Postal Code

Billing Country

Shipping Address

Shipping Street

Shipping City

Shipping State/Province

Shipping Zip/Postal Code

Shipping Country

<div class="slds-form" role="list">
  <div class="slds-form__row">
    <div class="slds-form__item" role="listitem">
      <div class="slds-form-element slds-form-element_horizontal slds-is-editing">

Overview of CSS Classes#

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

Selector	`.slds-form-element`
Summary	Creates layout for a form element
Support	dev-ready
Restrict	`div, fieldset, li`
Variant	True

Selector	`.slds-form-element__control`
Summary	Wrapper to any form display element
Restrict	`.slds-form-element div`

Selector	`.slds-listbox`
Summary	Listbox container
Support	dev-ready
Restrict	`.slds-dropdown ul, .slds-dueling-list__options ul, .slds-pill_container ul, .slds-listbox_selection-group ul, .slds-combobox_container ul, .slds-form-element__control ul, .slds-popover__body ul`
Variant	True

Selector	`.slds-listbox_inline`
Summary	Inline listbox
Restrict	`.slds-listbox`
Modifier	True

Selector	`.slds-listbox_horizontal`
Summary	Horizontal listbox
Restrict	`.slds-listbox`
Modifier	True

Selector	`.slds-listbox__item`
Summary	Listbox item
Restrict	`.slds-listbox > li`

Selector	`.slds-listbox__option`
Summary	Choosable option within listbox
Restrict	`.slds-listbox__item > div`

Selector	`.slds-listbox__option-header`
Summary	Header for choosable option within listbox
Restrict	`.slds-listbox__option h3`

Selector	`.slds-listbox__option-icon`
Summary	Container for listbox option icon
Restrict	`.slds-listbox__option span`

Selector	`.slds-has-focus`
Summary	Focus state of a vertical listbox option
Restrict	`.slds-listbox__option`
Modifier	True

Selector	`.slds-listbox__option_entity`
Summary	Modifies the listbox option if it contains an entity object
Restrict	`.slds-listbox__option`

Selector	`.slds-listbox__option_plain`
Summary	Modifies the listbox option if it contains an plain object or string
Restrict	`.slds-listbox__option`

Selector	`.slds-listbox__option_has-meta`
Summary	If the listbox option has metadata or secondary information that sits below its primary text
Restrict	`.slds-listbox__option`

Selector	`.slds-is-selected`
Summary	Modifier that makes selected icon visible
Restrict	`.slds-listbox__option`
Modifier	True

Selector	`.slds-listbox__option-text_entity`
Summary	The main text of an entity listbox
Restrict	`.slds-listbox__option span`

Selector	`.slds-listbox__option-meta`
Summary	The metadata or secondary text of an entity listbox
Restrict	`.slds-listbox__option span`

Selector	`.slds-listbox__icon-selected`
Summary	The icon within a plain listbox that indicates if an option has been selected or not.
Restrict	`.slds-listbox__item svg`

Selector	`.slds-listbox_vertical`
Summary	Creates a vertical listbox
Restrict	`.slds-listbox`
Modifier	True

Selector	`.slds-dropdown_length-5`
Summary	Forces overflow scrolling after 5 list items
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

Selector	`.slds-dropdown_length-7`
Summary	Forces overflow scrolling after 7 list items
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

Selector	`.slds-dropdown_length-10`
Summary	Forces overflow scrolling after 10 list items
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

Selector	`.slds-dropdown_length-with-icon-5`
Summary	Forces overflow scrolling after 5 list items with an icon
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

Selector	`.slds-dropdown_length-with-icon-7`
Summary	Forces overflow scrolling after 7 list items with an icon
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

Selector	`.slds-dropdown_length-with-icon-10`
Summary	Forces overflow scrolling after 10 list items with an icon
Restrict	`.slds-dropdown, .slds-dropdown__list, .slds-listbox`
Modifier	True

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-form-element_edit`
Summary	Modifier on slds-form-element that it needs to reserve space for the inline-edit trigger button
Restrict	`.slds-form-element`

Selector	`.slds-form-element_readonly`
Summary	When a form element is in view mode, we modify some styling
Restrict	`.slds-form-element`

Selector	`.slds-form-element__legend`
Summary	The form element label when applied to a legend element
Restrict	`.slds-form-element legend, .slds-form-element span`

Selector	`.slds-form-element__legend_has-tooltip`Deprecated
Summary	Aligns the legend properly when there is an info tooltip
Restrict	`.slds-form-element__legend`

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`Deprecated
Summary	Inline Edit on static form element
Restrict	`.slds-form-element__static`

Selector	`.slds-required`
Summary	Required asterisk
Restrict	`.slds-form-element abbr, abbr`

Selector	`.slds-has-error`
Summary	Error styles for form element
Restrict	`.slds-form-element`
Modifier	True

Selector	`.slds-form-element_compound`
Summary	Creates a form that consists of multiple form groups
Support	dev-ready
Restrict	`.slds-form-element`
Variant	True

Selector	`.slds-form-element_address`
Summary	Creates a form that consists of multiple form groups specific to an address form
Support	dev-ready
Restrict	`.slds-form-element_compound, .slds-form_compound`
Variant	True

Selector	`.slds-form-element_horizontal`
Summary	Horizontal form elements with label left-aligned to the control
Support	dev-ready
Restrict	`.slds-form-element`
Variant	True

Selector	`.slds-form-element__undo`
Summary	Container for the undo button icon found inside of slds-form-element
Restrict	`.slds-form-element div`

Selector	`.slds-form-element_stacked`
Summary	Vertical form elements with label stacked on top of control
Support	dev-ready
Restrict	`.slds-form-element`
Variant	True

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, .slds-input-has-icon span`

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`

Selector	`.slds-input-has-icon_right`
Summary	Positions .slds-input__icon to the right of the text input
Restrict	`.slds-input-has-icon`

Selector	`.slds-input-has-icon_left-right`
Summary	Positions .slds-input__icon_left to the left of the text input and .slds-input__icon_right to the right of the text input
Restrict	`.slds-input-has-icon`

Selector	`.slds-input-has-icon_group-right`
Summary
Restrict	`.slds-input-has-icon`

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`

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-slider-label`
Summary	Contains the label and range for the slider label - not required
Restrict	`.slds-form-element span`

Selector	`.slds-slider-label__label`
Summary	Contains the label for the slider and adds a hook for adding `.slds-assistive-text` class to visually hide the label, but not the range
Restrict	`.slds-slider-label span`

Selector	`.slds-slider-label__range`
Summary	Contains the range for the slider
Restrict	`.slds-slider-label span`

Selector	`.slds-form`
Summary	Creates layout for a form
Support	dev-ready
Restrict	`div, form`
Variant	True

Selector	`.slds-form__row`
Summary	Each row inside of a record form
Restrict	`.slds-form div`

Selector	`.slds-form__item`
Summary	Each item inside of a record form row
Restrict	`.slds-form__row div`

Selector	`.slds-is-edited`
Summary	Indicates if a form element has been edited, but unsaved
Restrict	`.slds-form div`

Selector	`.slds-form_horizontal`Deprecated
Summary	Horizontal form elements with label left-aligned to the control
Restrict	`.slds-form`

Selector	`.slds-form_stacked`Deprecated
Summary	Vertical form elements with label stacked on top of control
Restrict	`.slds-form`

Form Element Release Notes

2.18.0

Fixed

Fixed form element label to support RTL layout by removing left aligned spacing and placing it back on the opposite side.

2.16.0

Fixed

Correctly position help text under the corresponding input when in horizontal layout.
2.14.0

Fixed

Adjusted space between the form label and the information button icon for Mobile.

2.13.7

Changed

Revert compound form to its existing behavior of not wrapping to prevent unwanted side-effects in existing layouts.

2.13.1

Changed

Removed Mobile example under Stacked Alignment and Horizontal Alignment examples, as they did not conform to the specification.

Fixed

Small improvements to the UI text.

2.13.0

Changed

The compound form now wraps when the width of its parent container is smaller than the combined width of the form elements. This prevents the issue of input values becoming cutoff and unreadable due to shrinking compound form elements in a container with a small width.
When .slds-form-element is a child of .slds-form-element_compound, it now uses margins instead of padding for its horizontal spacing. This fixes the issue of dropdowns being incorrectly offset because the dropdown uses the extra space created by padding as its positioning reference.

2.12.2

Fixed

For touch devices, fixed an issue with button icons being the incorrect height if using custom elements.

2.11.7

Added

Added documentation and examples for mobile/touch context

2.10.0

Changed

For touch devices:
- Set the amount of space created for the edit icon to $square-tappable (2.75rem) which aligns with touch specific sizing
- Increase the tap target size of .slds-form-element__label to $height-tappable-small (2rem), center with flex, and increase font-size to $font-size-4 (0.875rem)
- Set the tap target height of button-icons to $height-tappable-small (2rem) when inline with label text
- Increase the font size of .slds-form-element__static to $font-size-5 (1rem)
- Within .slds-form-element_readonly, increase the size of .slds-icon to $square-tappable-x-small (1.5rem) and increase the height of .slds-form-element__control to $height-tappable (2.75rem) which aligns .slds-form-element_readonly's touch height to other form elements
- Remove the min-height from .slds-form-element_readonly .slds-form-element__control for denser read-only forms

2.8.1

Fixed

Resolved issue where left-aligned checkbox labels would become squished

2.8.0

Added

Added form classes for rows and columns, slds-form__row and slds-form__item
Added slds-form-element_stacked to manage stacked form elements
Added slds-form-element_horizontal to manage horizontal form elements
Added slds-is-edited class to indicate if a form element has been edited but not saved
Added slds-form-element_undo to wrap the undo button icon when a form element has been edited but not saved
Added support for single column horizontal form elements with slds-form-element_1-col, used to re-distribute the ratio of label to control
Added slds-form-element_compound to manage compound form elements
Added slds-form-element_address for address specific compound form elements
Added image based checkbox to record form

Changed

Added spacing around slds-form-element depending on densification settings
Form labels will now hyphenate when a word with no spaces exceeds the available space of the label container

Deprecated

Deprecated slds-form_stacked for slds-form-element_stacked
Deprecated slds-form_horizontal for slds-form-element_horizontal
Deprecated slds-form_compound for slds-form-element_compound

2.7.5

Changed

Form labels will now hyphenate when a word with no spaces exceeds the available space of the label container

2.7.4

Added

Added slds-form-element_address for address specific compound form elements

Fixed

Resolved issue where empty form elements would collapse in view mode

2.7.3

Fixed

Resolved issue where Rich Text content would overflow the container of a form element in IE11

2.7.0

Added

Left aligned label support for components with help text icon and required asterisk
Left aligned label support for fieldset and legend form elements
Added slds-form-element__readonly to apply appropiate styling when a form element is in view mode

Changed

Reduced overall height of all view mode form elements
Changed labels to be left-aligned when using slds-form_horizontal
Changed HTML so a compound form's slds-form-element__group is wrapped inside of slds-form-element__control
Changed HTML that moved the required asterisk inside of legend element
Changed HTML that moved the help text icon to be adjacent to the legend element
Changed HTML so slds-form-element__legend is now required on all legend elements
Changed HTML so slds-form-element__control is now required to wrap all form controls

Sections

About Form Elements#

Form Label#

Form Control#

Form Input Elements#

Accessibility#

Mobile#

Base#

States#

View Mode/Static#

Inline Edit#

Help Text Icon#

Mobile context changes

Showing tooltip#

Feedback#

Required#

Error#

Accessibility requirement

Layout Variations#

Stacked#

Horizontal#

Single Column Support#

Standalone#

With 50/50 split#

Error state#

Compound#

Rows#

Fields#

Address#

Usage Examples#

Record Form#

Accessibility Requirement

View Mode#

Stacked Alignment#

Horizontal Alignment#

Edit Mode#

Stacked Alignment#

Horizontal Alignment#

Overview of CSS Classes#

What are these categories?

Form Element Release Notes

2.18.0

Fixed

2.16.0

Fixed

2.14.0

Fixed

2.13.7

Changed

2.13.1

Changed

Fixed

2.13.0

Changed

2.12.2

Fixed

2.11.7

Added

2.10.0

Changed

2.8.1

Fixed

2.8.0

Added

Changed

Deprecated

2.7.5

Changed

2.7.4

Added

Fixed

2.7.3

Fixed

2.7.0

Added

Changed