Pill Container generator
Multi-select values — related contacts, tags, selected picklist entries — render as a wrapped list of removable chips via lightning-pill-container. Style the chip shape and remove-icon color to match the rest of your form.
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-pill-container items={items} class="studio-pill-container" onitemremove={handleRemove}></lightning-pill-container>
</template>Design tips for pill containers
- Keep remove (×) icons a neutral gray by default and only tint them on hover — a colored × on every chip reads as an error state.
- Wrap pills onto multiple lines rather than truncating or scrolling horizontally; horizontal pill scroll is a common accessibility complaint.
- If a list can exceed ~8 pills, add a "show more" affordance instead of letting the container grow indefinitely.