list-builder

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" class="slds-modal slds-fade-in-open slds-modal_large slds-list-builder" aria-labelledby="id-of-modalheader-h2" aria-modal="true" aria-describedby="modal-content-id-1">
    <div class="slds-modal__container">

States

Items Selected

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

Items Disabled

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

Items Default Selected

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

Examples

Two Column with Hidden Header

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

Filtered Results

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