Dual Listbox generator
Permission set assignments, related list configuration and any "pick several from many" admin screen uses lightning-dual-listbox. Style both panes consistently so moving items between them feels like one continuous control.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-dual-listbox
label="Assigned Permission Sets"
source-label="Available"
selected-label="Selected"
options={options}
value={value}
class="studio-dual-listbox"
onchange={handleChange}
></lightning-dual-listbox>
</template>Design tips for dual listboxes
- Keep both panes the same height so items don’t appear to jump when moved from one side to the other.
- Use a visible left-border accent on selected items so the "selected" pane is scannable without reading every label.
- For long option lists, note in your field help text that items can be reordered with keyboard arrows once selected.
Related components
Components developers commonly compare against or pair with Dual Listbox.