Salesforce Docs Portal

New and Changed Lightning Web Components

Build UI easily with these new and changed components.

New Components

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

lightning-dynamic-list-container (Developer Preview)
Loads a list of data and manages the data based on the scroll position. For more information, see Load Large Lists Dynamically (Developer Preview).
lightning-dynamic-list-item (Developer Preview)
Represents individual rows in the dynamic list. Each list item is positioned dynamically by the list container. For more information, see Load Large Lists Dynamically (Developer Preview).

Changed Lightning Web Components

These components have changed.

lightning-carousel-image
For right-to-left languages, the currently selected carousel image is now visible.
lightning-click-to-dial
For right-to-left languages, the phone icon now appears on the right of a telephone number.
lightning-combobox
The variant attribute supports a new value.
  • button—A pill-shaped combobox with SLDS icon support. Specify the SLDS icon name on the optional iconName property on each option. When you select an option, the icon and option label are shown on the button.
lightning-dual-listbox
These accessibility behaviors are new.
  • The move buttons are disabled if no items on the left are selected.
  • The reorder buttons are disabled if there are no items on the right.
  • Required options can receive keyboard focus so screen readers can announce them.
  • To accommodate high magnification when zoom is greater than 200%, the list boxes stack vertically, separated by up and down arrow icons instead of right and left arrow buttons.
  • At the standard browser zoom of 100%, the component reflows from a horizontal layout to a vertical stack at a width of approximately 683 pixels.
lightning-datatable
These accessibility behaviors are new.
  • In action mode, when you tab into an editable cell, the cell no longer displays an input field automatically. To activate the input field, tab again to focus on the edit (pencil) icon and press the Enter key.
  • In navigation mode, when you tab into the header checkbox cell, press the Space key once to focus and toggle the checkbox, which selects or deselects all rows. Previously, you pressed the Space key to focus on the checkbox and pressed the Space key again to toggle the checkbox.
lightning-file-upload
The maximum file size limit has increased from 2 GB to 10 GB.
lightning-formatted-location
For right-to-left languages, latitude and longitude values with a minus (-) sign now display the minus sign on the left side.
lightning-formatted-number
Large numbers with more than approximately 15 or 16 total digits can now be formatted correctly.
lightning-input
The input field of type checkbox has a new attribute.
  • indeterminate—If present, the checkbox shows an indeterminate state, presenting a dash indicator instead of a checkmark or empty box. This is commonly used for "select all" checkboxes, presenting the dash indicator when only some items in a group are selected. Clicking the checkbox clears the indeterminate state.
These input field types have changed.
datetime—When read-only is specified, the time field no longer displays with a border and the icon is grayed out.
checkbox-button—Right-to-left languages are now supported.
color—The range indicator on the color picker has been converted from an anchor link to a button.
time—When read-only is specified, the time field no longer displays with a border and the icon is grayed out.
lightning-input-field
The time field has changed.
  • When read-only is specified, the time field no longer displays with a border and the icon is grayed out.
lightning-input-name
  • When read-only is specified, the salutation field no longer displays with a border and the icon is grayed out.
lightning-output-field
To ensure that records are easy to view especially when many fields are present, read-only fields now render with a bottom border.
lightning-slider
When you specify a value for the max attribute, you can no longer slide past this value while interacting with the component.
lightning-tabset
For right-to-left languages, the left arrow key now navigates to the tab on the left, or the last tab when the first tab is focused.
lightning-textarea
When you specify both disabled and read-only attributes, the styling appears the same as when the component specifies disabled only.
lightning-tree-grid
For right-to-left languages, the chevron icon now points downwards as expected.

See Also