Component Blueprints

List Builder

  • HTML/CSS:Dev Ready
  • Layout:Desktop Only

Sections

The List Builder is a quick, visual and efficient ‘shopping cart’ approach to adding multiple items to a parent object.

About List Builder#

The List builder relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes.

Base#

<div class="demo-only demo-only_viewport" style="height:640px">
  <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="id-of-modalheader-h1" class="slds-modal slds-fade-in-open slds-modal_large slds-list-builder">
    <div class="slds-modal__container">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">

States#

Items Selected#

<div class="demo-only demo-only_viewport" style="height:640px">
  <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="id-of-modalheader-h1" class="slds-modal slds-fade-in-open slds-modal_large">
    <div class="slds-modal__container">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">

Items Disabled#

<div class="demo-only demo-only_viewport" style="height:640px">
  <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="id-of-modalheader-h1" class="slds-modal slds-fade-in-open slds-modal_large">
    <div class="slds-modal__container">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">

Items Default Selected#

<div class="demo-only demo-only_viewport" style="height:640px">
  <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="id-of-modalheader-h1" class="slds-modal slds-fade-in-open slds-modal_large">
    <div class="slds-modal__container">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">

Examples#

Two Column with Hidden Header#

<div class="demo-only demo-only_viewport" style="height:640px">
  <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="id-of-modalheader-h1" class="slds-modal slds-fade-in-open slds-modal_large">
    <div class="slds-modal__container">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">

Filtered Results#

<div class="demo-only demo-only_viewport" style="height:640px">
  <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="id-of-modalheader-h1" class="slds-modal slds-fade-in-open slds-modal_large">
    <div class="slds-modal__container">
      <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse">

Overview of CSS Classes#

Selector.slds-list-builder
Summary
Supportdev-ready
Restrictdiv, section
VariantTrue

List Builder Release Notes

2.16.0

Changed

  • Removed the usage of the deprecated combobox. The List Builder now uses the current combobox.
  • Updated combobox to ARIA 1.2 compliance.

2.13.0

Changed

  • The assistive text for the listbox of pills has been moved out of the individual pills to remove repetition for users with screenreaders.

2.11.0

Changed

  • List Builder now uses the new .slds-checkbox-button instead of the deprecated .slds-checkbox_add-button

2.7.0

Added

  • Added examples for list builders with disabled items and items selected by default.
  • Added an example of a list builder with a headless table

Changed

  • List Builder now requires aria-multiselectable="true" applied to the table element.
  • Each row now requires aria-selected to be set to false on every row that is not selected