Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - form-pill-group
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
<div class="example-container"> <div id="dismissible-example" class="pill-group-container"></div> </div> <h3>Selectable and Dismissible</h3> <p>Use a Selectable and Dismissible Form Pill to show an option that a user can select, deselect, or dismiss.</p> <div class="example-container"> <div id="selectable-dismissible-example" class="pill-group-container"></div> </div> <!-- States --> <h2>States</h2> <h3>Selected</h3> <p>A Form Pill can be placed into a selected state by setting the <code>selected</code> property.</p> <div class="example-container"> <div id="selected-example" class="pill-group-container"></div> </div> <h3>Error</h3> <p>Use an Error Form Pill to highlight an object that the user must be made aware of because it's considered to be in a bad or broken state.</p> <div class="example-container"> <div id="error-example" class="pill-group-container"></div> </div> <h3>Disabled</h3> <p>Use a disabled Form Pill to indicate that a particular option cannot be interacted with or can be safely ignored.</p> <div class="example-container"> <div id="disabled-example" class="pill-group-container"></div> </div> <!-- Composition Notes --> <h2>Composition Notes</h2> <h3>Truncating Text</h3> <p>Pill text should never wrap to the next line. If the text length is longer than the max width of the pill group's container, consider using Truncate to truncate the Form Pill text.</p> <div class="example-container"> <div id="truncate-example" class="pill-group-container"></div> </div> <h3>Adding an Avatar</h3> <p>A Form Pill can have an optional Avatar. We recommend placing the Avatar ahead of the pill text.</p> <div class="example-container"> <div id="avatar-example" class="pill-group-container"></div> </div> <h3>Adding an Icon</h3> <p>A Form Pill can have an optional Icon. We recommend placing the Icon ahead of the pill text.</p> <div class="example-container"> <div id="icon-example" class="pill-group-container"></div> </div> <!-- Usage Guidelines --> <h2>When to Use Form Pill Group</h2> <div class="do-dont-container"> <div class="do-card"> <h4>Do</h4> <p>Use Form Pills inside of a form or when editing a collection of data.</p> </div> <div class="dont-card"> <h4>Don't</h4> <p>Don't use Form Pills in non-editable pages to represent a collection of similar objects, outside of a form, or outside of editing scenarios. Use a Display Pill Group instead.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <h4>Do</h4> <p>Only pass FormPill as a direct descendent of a FormPillGroup.</p> </div> <div class="dont-card"> <h4>Don't</h4> <p>Don't pass FormPillGroup any other component type, and do not wrap FormPill in any other component or DOM element.</p> </div> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div> <script> // Wait for modules to load setTimeout(() => { if (window.TwilioPaste) { const { FormPill, FormPillGroup, useFormPillState, ProductVideoIcon, ProductVerifyIcon, ProductVoiceIcon, ProductMessagingIcon, ProductChatIcon, ProductPhoneNumbersIcon, ProductInterconnectIcon, Avatar, AgentIcon, Truncate, ProductMarketingCampaignsIcon, ProductInternetOfThingsIcon, ProductEngagementIntelligencePlatformIcon, ProductCodeExchangePartnerIcon, ProductBillingIcon, ProductLookupIcon, ProductConversationsIcon } = window.TwilioPaste; // Basic Example function BasicExample() { const pillState = useFormPillState(); return React.createElement(FormPillGroup, { ...pillState, "aria-label": "Products:" }, React.createElement(FormPill, { ...pillState }, React.createElement(ProductVideoIcon, { decorative: true, size: "sizeIcon10" }), "Video" ), React.createElement(FormPill, { ...pillState }, React.createElement(ProductVerifyIcon, { decorative: true, size: "sizeIcon10" }), "Verify" ) ); } // Large Example function LargeExample() { const pillState = useFormPillState(); return React.createElement(FormPillGroup, { ...pillState, "aria-label": "Products:", size: "large" }, React.createElement(FormPill, { ...pillState }, React.createElement(ProductVideoIcon, { decorative: true, size: "sizeIcon10" }), "Video" ), React.createElement(FormPill, { ...pillState }, React.createElement(ProductVerifyIcon, { decorative: true, size: "sizeIcon10" }), "Verify" ) ); } // Selectable Example function SelectableExample() { const [selectedSet, setSelectedSet] = React.useState(new Set(["voice"])); const pillState = useFormPillState(); const handleSelect = (id) => { const newSelectedSet = new Set(selectedSet); if (newSelectedSet.has(id)) { newSelectedSet.delete(id); } else { newSelectedSet.add(id); } setSelectedSet(newSelectedSet); }; return React.createElement(FormPillGroup, { ...pillState, "aria-label": "Products:" }, React.createElement(FormPill, { ...pillState, selected: selectedSet.has("voice"), onSelect: () => handleSelect("voice") }, React.createElement(ProductVoiceIcon, { decorative: true, size: "sizeIcon10" }), "Voice" ), React.createElement(FormPill, { ...pillState, selected: selectedSet.has("messaging"), onSelect: () => handleSelect("messaging") }, React.createElement(ProductMessagingIcon, { decorative: true, size: "sizeIcon10" }), "Messaging" ), React.createElement(FormPill, { ...pillState, selected: selectedSet.has("chat"), onSelect: () => handleSelect("chat") }, React.createElement(ProductChatIcon, { decorative: true, size: "sizeIcon10" }), "Chat" ) ); } // Dismissible Example function DismissibleExample() { const [pills, setPills] = React.useState([ { id: "phone", label: "Phone Numbers", icon: ProductPhoneNumbersIcon } ]); const pillState = useFormPillState(); const handleDismiss = (id) => { setPills(pills.filter(pill => pill.id !== id)); }; return React.createElement(FormPillGroup, { ...pillState, "aria-label": "Products:" }, ...pills.map(pill => React.createElement(FormPill, { key: pill.id, ...pillState, onDismiss: () => handleDismiss(pill.id) }, React.createElement(pill.icon, { decorative: true, size: "sizeIcon10" }), pill.label ) ) ); } // Selectable and Dismissible Example function SelectableDismissibleExample() { const [pills, setPills] = React.useState([ { id: "interconnect", label: "Interconnect", icon: ProductInterconnectIcon } ]); const [selectedSet, setSelectedSet] = React.useState(new Set()); const pillState = useFormPillState(); const handleSelect = (id) => { const newSelectedSet = new Set(selectedSet); if (newSelectedSet.has(id)) { newSelectedSet.delete(id); } else { newSelectedSet.add(id); } setSelectedSet(newSelectedSet); }; const handleDismiss = (id) => { setPills(pills.filter(pill => pill.id !== id)); const newSelectedSet = new Set(selectedSet); newSelectedSet.delete(id); setSelectedSet(newSelectedSet); }; return React.createElement(FormPillGroup, { ...pillState, "aria-label": "Products:" }, ...pills.map(pill => React.createElement(FormPill, { key: pill.id, ...pillState, selected: selectedSet.has(pill.id), onSelect: () => handleSelect(pill.id), onDismiss: () => handleDismiss(pill.id) }, React.createElement(pill.icon, { decorative: true, size: "sizeIcon10" }), pill.label ) ) ); } // Selected State Example function SelectedExample() { const pillState = useFormPillState(); return React.createElement(FormPillGroup, { ...pillState, "aria-label": "Products:" }, React.createElement(FormPill, { ...pillState, selected: true }, React.createElement(ProductVideoIcon, { decorative: true, size: "sizeIcon10" }), "Video" ), React.createElement(FormPill, { ...pillState }, React.createElement(ProductVerifyIcon, { decorative: true, size: "sizeIcon10" }), "Verify" ) ); } // Error State Example function ErrorExample() { const pillState = useFormPillState(); return React.createElement(FormPillGroup, { ...pillState, "aria-label": "Products:" }, React.createElement(FormPill, { ...pillState, variant: "error" }, React.createElement(ProductVideoIcon, { decorative: true, size: "sizeIcon10" }), "Video" ), React.createElement(FormPill, { ...pillState }, React.createElement(ProductVerifyIcon, { decorative: true, size: "sizeIcon10" }), "Verify" ) ); } // Disabled State Example function DisabledExample() { const pillState = useFormPillState(); return React.createElement(FormPillGroup, { ...pillState, "aria-label": "Products:" }, React.createElement(FormPill, { ...pillState, disabled: true }, React.createElement(ProductVideoIcon, { decorative: true, size: "sizeIcon10" }), "Video" ), React.createElement(FormPill, { ...pillState }, React.createElement(ProductVerifyIcon, { decorative: true, size: "sizeIcon10" }), "Verify" ) ); } // Truncate Example function TruncateExample() { const pillState = useFormPillState(); return React.createElement("div", { style: { width: "300px" } }, React.createElement(FormPillGroup, { ...pillState, "aria-label": "Products:" }, React.createElement(FormPill, { ...pillState }, React.createElement(ProductMarketingCampaignsIcon, { decorative: true, size: "sizeIcon10" }), React.createElement(Truncate, { title: "Marketing Campaigns" }, "Marketing Campaigns") ), React.createElement(FormPill, { ...pillState }, React.createElement(ProductInternetOfThingsIcon, { decorative: true, size: "sizeIcon10" }), React.createElement(Truncate, { title: "Internet of Things" }, "Internet of Things") ) ) ); } // Avatar Example function AvatarExample() { const pillState = useFormPillState(); return React.createElement(FormPillGroup, { ...pillState, "aria-label": "Agents:" }, React.createElement(FormPill, { ...pillState }, React.createElement(Avatar, { size: "sizeIcon10", name: "Agent", icon: AgentIcon }), "Agent Smith" ) ); } // Icon Example function IconExample() { const pillState = useFormPillState(); return React.createElement(FormPillGroup, { ...pillState, "aria-label": "Products:" }, React.createElement(FormPill, { ...pillState }, React.createElement(ProductMessagingIcon, { decorative: true, size: "sizeIcon10" }), "Messaging" ), React.createElement(FormPill, { ...pillState }, React.createElement(ProductBillingIcon, { decorative: true, size: "sizeIcon10" }), "Billing" ), React.createElement(FormPill, { ...pillState }, React.createElement(ProductLookupIcon, { decorative: true, size: "sizeIcon10" }), "Lookup" ) ); } // Render examples ReactDOM.render(React.createElement(BasicExample), document.getElementById("basic-example")); ReactDOM.render(React.createElement(LargeExample), document.getElementById("large-example")); ReactDOM.render(React.createElement(SelectableExample), document.getElementById("selectable-example")); ReactDOM.render(React.createElement(DismissibleExample), document.getElementById("dismissible-example")); ReactDOM.render(React.createElement(SelectableDismissibleExample), document.getElementById("selectable-dismissible-example")); ReactDOM.render(React.createElement(SelectedExample), document.getElementById("selected-example")); ReactDOM.render(React.createElement(ErrorExample), document.getElementById("error-example")); ReactDOM.render(React.createElement(DisabledExample), document.getElementById("disabled-example")); ReactDOM.render(React.createElement(TruncateExample), document.getElementById("truncate-example")); ReactDOM.render(React.createElement(AvatarExample), document.getElementById("avatar-example")); ReactDOM.render(React.createElement(IconExample), document.getElementById("icon-example")); } }, 1000); </script> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">