New and Changed Lightning Components

Build user interfaces quickly with a bevy of new components.

New Components

The following components are new and require API version 41.0 and later.


For more information about setting your API version in the Developer Console, see Update Your Components to the Latest API Version to Use New lightning: Components.

Displays a collection of vertically stacked sections with multiple content areas, only one of which is expanded at a time. When you select a section, it’s expanded or collapsed. Each section can hold one or more Lightning components.
This component is used together with the following sub-component.
  • lightning:accordionSection—Keeps related content in a single container.

Screenshot of an accordion component.

An icon-only button that retains state. The state changes when you press the button.

lightning:buttonIconStateful represents an icon-only button that retains state

A checkbox group that enables selection of single or multiple checkboxes.

lightning:checkboxGroup displays a set of checkboxes

A component that renders a valid phone number as click-to-dial enabled for Open CTI or Salesforce Call Center. This field respects existing click-to-dial commands for computer-telephony integrations (CTI) with Salesforce.

Screenshot of a number that is click-to-dial enabled.

For more information, see Create Click-to-Dial Phone Numbers with the lightning:clickToDial Component.

A read-only input field that contains a dropdown list of selectable options. Multiple selection is currently not supported.

lightning:combobox contains a dropdown list of selectable options

A table that displays columns of data, formatted according to type.

lightning:datatable displays columns of data

Represents two side-by-side list boxes. Select one or more options in the list on the left. Move selected options to the list on the right. The order of the selected options is maintained, and you can reorder options. You can also specify required options.

lightning:dualListbox enables multiple selection of options and ordering of the selection

Represents various dynamic icons with different states. For example, you can use this component to visually display an event that’s in progress, such as a graph that’s loading. The following options are available.

Screenshot of the Ellie icon.Screenshot of the EQ icon.Screenshot of the Scorie icon.Screenshot of the Strength icon.Screenshot of the Trend icon.Screenshot of the Waffle icon.

  • Ellie: A pulsing blue circle, which pulses and stops after one animation cycle
  • EQ: An animated graph with three bars that rise and fall randomly
  • Score: A green filled circle or a red unfilled circle
  • Strength: Three animated horizontal circles that are colored green or red
  • Trend: Animated arrows that point up, down, or straight
  • Waffle: A square made up of a 3x3 grid of circles, which animates on hover
Displays a representation of content uploaded as an attachment.

lightning:fileCard provides a preview of your file upload.

lightning:fileUpload (Beta)
Enables multiple files to be uploaded to a record. The file uploader includes drag-and-drop functionality and filtering by file types.

lightning:fileUploader enables file uploads to a record.


A sub-component that provides Lightning page region width information to the component that contains it. See Make Your Lightning Page Components Width-Aware with lightning:flexipageRegionInfo.


Represents a flow interview in Lightning runtime.

Flow rendered by using the lightning:flow component
Displays an email address as a hyperlink with the mailto: URL scheme.

lightning:formattedEmail displays email addresses

Displays a geolocation in decimal degrees using the format [latitude, longitude].

lightning:formattedLocation displays geolocation coordinates

Displays a formatted phone number as a hyperlink with the tel: URL scheme. Only North American phone numbers are currently supported.

lightning:formattedPhone displays phone numbers

Displays rich text that’s formatted with whitelisted tags and attributes. Other tags and attributes are removed and only their text content is displayed.

lightning:formattedRichText displays rich text

Displays text, replaces newlines with line breaks, and creates hyperlinks within a text block.

lightning:formattedText displays text and hyperlinks

Displays a URL as a hyperlink.

lightning:formattedURL displays hyperlinks

An icon with a text popover. The popover is displayed when you hover or focus on the icon that’s attached to it. Manual positioning of the popover is currently not supported.

lightning:helptext displays information describing an element

Represents a geolocation compound field that accepts a latitude and longitude value.

lightning:inputLocation represents a geolocation compound field

Provides messaging functionality via notices and toasts. Notices alert users to system-related issues and updates.

A notice informs users to system-related issues and updates.

Toasts enable you to provide feedback and serve as a confirmation mechanism after the user takes an action.

A toast provides feedback following a user action.

lightning:omniToolkitAPI (Beta)
Provides methods that can be used from Lightning components in the utility bar for Omni-Channel. The component doesn’t affect the UI.
Messages can be displayed in modals and popovers. Modals display a dialog in the foreground of the app, interrupting a user’s workflow and drawing attention to the message.

A modal displays a dialog in the app foreground.

Popovers display relevant information when you hover over a reference element.

A popover displays relevant information on an element.


Represents a read-only display of a label, help text, and value for a field on a Salesforce object. You must provide the record ID in the wrapper lightning:recordViewForm component.

lightning:outputField displays the label, field, and help text associated with a record.

lightning:path (Beta)
A Path derived from a picklist that is specified by an admin in setup. Includes Key Fields and Guidance, and a Mark Complete action button.

lightning:path displays the progress of a process with key fields and guidance.

lightning:picklistPath (Beta)
A Path derived from a picklist, which is specified by the picklistFieldApiName attribute and does not have Key Fields, Guidance, or action buttons.

lightning:picklistPath shows the progress of an operation based on a specified picklist field.

A horizontal progress bar that indicates the progress of an operation from left to right, such as for a file download or upload.

lightning:progressBar shows the progress of an operation

lightning:progressIndicator (Beta)
Provides a visual indication on the progress of a particular process. You can create two types of indicators: base (default) or path.

lightning:progressIndicator displays the base type by default

lightning:progressIndicator path type shows progress of a process

A set of radio buttons that can have a single option selected.

lightning:radioGroup displays a set of radio buttons


Represents a record view that displays one or more fields fields based on their field types, provided by lightning:outputField.

A slider that enables numerical input between two specified numbers.

lightning:slider enables selection of a number

Provides visualization of a structure hierarchy. Tree items, also known as branches, can be expanded or collapsed.

lightning:tree provides visualization of a structure hierarchy.

A vertical list of links that takes the user to another page or parts of the page that the user is on.
This component is used with the following sub-components.
  • lightning:verticalNavigationItem—A text-only link within lightning:verticalNavigationSection or lightning:verticalNavigationOverflow.
  • lightning:verticalNavigationItemBadge—A link and badge within lightning:verticalNavigationSection or lightning:verticalNavigationOverflow.
  • lightning:verticalNavigationItemIcon—A link and icon within lightning:verticalNavigationSection or lightning:verticalNavigationOverflow.
  • lightning:verticalNavigationOverflow—An overflow of items that can be expanded and collapsed. The overflow section does not adjust automatically based on the view port.
  • lightning:verticalNavigationSection—A section within lightning:verticalNavigation.
This example shows a lightning:verticalNavigation component with a Reports and Folders sections.

lightning:verticalNavigation displays a list of links

Changed Components

The following components have changed.

The following attribute is new.
  • showHeader—Controls the visibility of the header of an embedded Analytics dashboard. If true, the dashboard is displayed with a header bar that includes dashboard information and controls. If false, the dashboard appears without a header bar. Note that the header bar automatically appears when either showSharing or showTitle is true.
The following attribute has changed.
  • variant—The success variant has been added. This variant creates a green button.
The following attribute has changed.
  • variant—The destructive and success variants have been added.
The following attribute has changed.
  • columns—The cellAttributes property name has been changed to typeAttributes.
lightning:formattedDateTime (Beta)
The following attribute has changed.
  • value—ISO 8601 date formats are now supported. You no longer have to convert your ISO string to a Date object or timestamp when working with date fields in Salesforce records.
lightning:input (Beta)
The following type is new.
  • checkbox-button—Enables you to select one or more options with an alternative visual design.
lightning:tabset (Beta)
The following variant is new.
  • vertical—Displays tabs vertically to the left of the content area.
This component has moved from the force namespace to the lightning namespace.
The following attribute is new.
  • onbeforeselect—Action fired before an item is selected. The event parameters include the name of the selected item. To prevent the onselect handler from running, call event.preventDefault() in the onbeforeselect handler.
This component has moved from the force namespace to the lightning namespace.
ui:outputNumber ignores non-number values and doesn’t output anything. Previously, ui:outputNumber displayed an error that was hard to debug for non-number values, such as: <ui:outputNumber value="abc" />.
The following attribute is new.
  • showHeader—Controls the visibility of the header of an embedded Analytics dashboard. If true, the dashboard is displayed with a header bar that includes dashboard information and controls. If false, the dashboard appears without a header bar. Note that the header bar automatically appears when either showSharing or showTitle is true.